windmill-components 1.504.0 → 1.504.2

package/package/components/graph/renderers/nodes/AssetNode.svelte

@@ -0,0 +1,257 @@
+<script module lang="ts">export const NODE_WITH_READ_ASSET_Y_OFFSET = 45;
+export const NODE_WITH_WRITE_ASSET_Y_OFFSET = 45;
+export const READ_ASSET_Y_OFFSET = -45;
+export const WRITE_ASSET_Y_OFFSET = 64;
+export const assetDisplaysAsInputInFlowGraph = (a) => !a.access_type || a.access_type === 'r' || a.access_type === 'rw';
+export const assetDisplaysAsOutputInFlowGraph = (a) => a.access_type === 'w' || a.access_type === 'rw';
+let computeAssetNodesCache;
+export function computeAssetNodes(nodes, edges, assetsMap, extraData) {
+    if (nodes === computeAssetNodesCache?.[0] && deepEqual(assetsMap, computeAssetNodesCache?.[1]))
+        return computeAssetNodesCache[2];
+    const MAX_ASSET_ROW_WIDTH = 300;
+    const ASSETS_OVERFLOWED_NODE_WIDTH = 25;
+    const allAssetNodes = [];
+    const allAssetEdges = [];
+    const yPosMap = {};
+    for (const node of nodes) {
+        const assets = assetsMap?.[node.id] ?? [];
+        // Each asset can be displayed at the top and bottom
+        // i.e once (R or W) or twice (RW)
+        const inputAssets = assets.filter(assetDisplaysAsInputInFlowGraph);
+        const outputAssets = assets.filter(assetDisplaysAsOutputInFlowGraph);
+        const displayedInputAssets = inputAssets.slice(0, 3);
+        const displayedOutputAssets = outputAssets.slice(0, 3);
+        const overflowedInputAssets = inputAssets.slice(3);
+        const overflowedOutputAssets = outputAssets.slice(3);
+        // This allows calculating which nodes to offset on the y axis to
+        // make space for the asset nodes
+        if (inputAssets.length || outputAssets.length)
+            yPosMap[node.position.y] = yPosMap[node.position.y] ?? {};
+        if (inputAssets.length)
+            yPosMap[node.position.y].r = true;
+        if (outputAssets.length)
+            yPosMap[node.position.y].w = true;
+        // All asset nodes displayed on top
+        const inputAssetNodes = displayedInputAssets.map((asset, i) => {
+            let inputAssetXGap = 12;
+            let inputAssetWidth = 150;
+            const targetRowW = MAX_ASSET_ROW_WIDTH -
+                (overflowedInputAssets.length ? ASSETS_OVERFLOWED_NODE_WIDTH + inputAssetXGap / 2 : 0);
+            let totalInputRowWidth = () => inputAssetWidth * displayedInputAssets.length +
+                inputAssetXGap * (displayedInputAssets.length - 1);
+            if (totalInputRowWidth() > MAX_ASSET_ROW_WIDTH) {
+                const mult = targetRowW / totalInputRowWidth();
+                inputAssetWidth = inputAssetWidth * mult;
+                inputAssetXGap = inputAssetXGap * mult;
+            }
+            return {
+                type: 'asset',
+                parentId: node.id,
+                data: { asset },
+                id: `${node.id}-asset-in-${asset.kind}-${asset.path}`,
+                width: inputAssetWidth,
+                position: {
+                    x: displayedInputAssets.length === 1
+                        ? (NODE.width - inputAssetWidth) / 2 - 10 // Ensure we see the edge
+                        : (inputAssetWidth + inputAssetXGap) * (i - displayedInputAssets.length / 2) +
+                            (NODE.width + inputAssetXGap) / 2 +
+                            (overflowedInputAssets.length
+                                ? (-ASSETS_OVERFLOWED_NODE_WIDTH - inputAssetXGap) / 2
+                                : 0),
+                    y: READ_ASSET_Y_OFFSET
+                }
+            };
+        });
+        // All asset nodes displayed on the bottom
+        const outputAssetNodes = displayedOutputAssets.map((asset, i) => {
+            let outputAssetXGap = 12;
+            let outputAssetWidth = 150;
+            const targetRowW = MAX_ASSET_ROW_WIDTH -
+                (overflowedOutputAssets.length ? ASSETS_OVERFLOWED_NODE_WIDTH + outputAssetXGap / 2 : 0);
+            let totalOutputRowWidth = () => outputAssetWidth * displayedOutputAssets.length +
+                outputAssetXGap * (displayedOutputAssets.length - 1);
+            if (totalOutputRowWidth() > MAX_ASSET_ROW_WIDTH) {
+                const mult = targetRowW / totalOutputRowWidth();
+                outputAssetWidth = outputAssetWidth * mult;
+                outputAssetXGap = outputAssetXGap * mult;
+            }
+            return {
+                type: 'asset',
+                parentId: node.id,
+                data: { asset },
+                id: `${node.id}-asset-out-${asset.kind}-${asset.path}`,
+                width: outputAssetWidth,
+                position: {
+                    x: displayedOutputAssets.length === 1
+                        ? (NODE.width - outputAssetWidth) / 2 - 10 // Ensure we see the edge
+                        : (outputAssetWidth + outputAssetXGap) * (i - displayedOutputAssets.length / 2) +
+                            (NODE.width + outputAssetXGap) / 2 +
+                            (overflowedOutputAssets.length
+                                ? (-ASSETS_OVERFLOWED_NODE_WIDTH - outputAssetXGap) / 2
+                                : 0),
+                    y: WRITE_ASSET_Y_OFFSET
+                }
+            };
+        });
+        const inputAssetEdges = inputAssetNodes?.map((n) => ({
+            id: `${n.id}-edge`,
+            source: n.id ?? '',
+            target: n.parentId ?? '',
+            type: 'empty',
+            data: { class: '!opacity-35 dark:!opacity-20' }
+        }));
+        const outputAssetEdges = outputAssetNodes?.map((n) => ({
+            id: `${n.id}-edge`,
+            source: n.parentId ?? '',
+            target: n.id ?? '',
+            type: 'empty',
+            data: { class: '!opacity-35 dark:!opacity-20' }
+        }));
+        allAssetEdges.push(...(outputAssetEdges ?? []), ...(inputAssetEdges ?? []));
+        allAssetNodes.push(...(inputAssetNodes ?? []), ...(outputAssetNodes ?? []));
+        // If there are more than 3 assets, we create an overflow node
+        if (overflowedInputAssets.length)
+            allAssetNodes.push({
+                type: 'assetsOverflowed',
+                data: { overflowedAssets: overflowedInputAssets },
+                id: `${node.id}-assets-overflowed-in`,
+                parentId: node.id,
+                width: ASSETS_OVERFLOWED_NODE_WIDTH,
+                position: {
+                    x: MAX_ASSET_ROW_WIDTH - ASSETS_OVERFLOWED_NODE_WIDTH - 14,
+                    y: READ_ASSET_Y_OFFSET
+                }
+            });
+        allAssetEdges.push({
+            id: `${node.id}-assets-overflowed-in-edge`,
+            source: `${node.id}-assets-overflowed-in`,
+            target: node.id,
+            type: 'empty',
+            data: { class: '!opacity-35 dark:!opacity-20' }
+        });
+        if (overflowedOutputAssets.length)
+            allAssetNodes.push({
+                type: 'assetsOverflowed',
+                data: { overflowedAssets: overflowedOutputAssets },
+                id: `${node.id}-assets-overflowed-out`,
+                parentId: node.id,
+                width: ASSETS_OVERFLOWED_NODE_WIDTH,
+                position: {
+                    x: MAX_ASSET_ROW_WIDTH - ASSETS_OVERFLOWED_NODE_WIDTH - 14,
+                    y: WRITE_ASSET_Y_OFFSET
+                }
+            });
+        allAssetEdges.push({
+            id: `${node.id}-assets-overflowed-out-edge`,
+            source: node.id,
+            target: `${node.id}-assets-overflowed-out`,
+            type: 'empty',
+            data: { class: '!opacity-35 dark:!opacity-25' }
+        });
+    }
+    // Shift all nodes to make space for the new asset nodes
+    const sortedNewNodes = clone(nodes.sort((a, b) => a.position.y - b.position.y));
+    let currentYOffset = 0;
+    let prevYPos = NaN;
+    for (const node of sortedNewNodes) {
+        if (node.position.y !== prevYPos) {
+            if (yPosMap[prevYPos]?.w)
+                currentYOffset += NODE_WITH_WRITE_ASSET_Y_OFFSET;
+            if (yPosMap[node.position.y]?.r)
+                currentYOffset += NODE_WITH_READ_ASSET_Y_OFFSET;
+            prevYPos = node.position.y;
+        }
+        node.position.y += currentYOffset;
+    }
+    let ret = [
+        [...sortedNewNodes, ...allAssetNodes],
+        [...edges, ...allAssetEdges]
+    ];
+    computeAssetNodesCache = [nodes, clone(assetsMap), ret];
+    return ret;
+}
+</script>
+
+<script lang="ts">import NodeWrapper from './NodeWrapper.svelte';
+import { AlertTriangle } from 'lucide-svelte';
+import { assetEq, formatAssetKind } from '../../../assets/lib';
+import { twMerge } from 'tailwind-merge';
+import { getContext } from 'svelte';
+import ExploreAssetButton, { assetCanBeExplored } from '../../../../../routes/(root)/(logged)/assets/ExploreAssetButton.svelte';
+import { Tooltip } from '../../../meltComponents';
+import { clone, pluralize } from '../../../../utils';
+import AssetGenericIcon from '../../../icons/AssetGenericIcon.svelte';
+import { deepEqual } from 'fast-equals';
+import { NODE } from '../../util';
+import { userStore } from '../../../../stores';
+const flowGraphAssetsCtx = getContext('FlowGraphAssetContext');
+const usageCount = $derived(Object.values(flowGraphAssetsCtx.val.assetsMap ?? {})
+    .flat()
+    .filter((asset) => assetEq(asset, data.asset)).length);
+let { data } = $props();
+const isSelected = $derived(assetEq(flowGraphAssetsCtx.val.selectedAsset, data.asset));
+const cachedResourceMetadata = $derived(flowGraphAssetsCtx.val.resourceMetadataCache[data.asset.path]);
+</script>
+
+<NodeWrapper>
+	{#snippet children({ darkMode })}
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<Tooltip>
+			<div
+				class={twMerge(
+					'bg-surface h-6 flex items-center gap-1.5 rounded-sm text-tertiary border overflow-clip',
+					isSelected ? 'bg-surface-secondary !border-surface-inverse' : 'border-transparent'
+				)}
+				onmouseenter={() => (flowGraphAssetsCtx.val.selectedAsset = data.asset)}
+				onmouseleave={() => (flowGraphAssetsCtx.val.selectedAsset = undefined)}
+			>
+				<AssetGenericIcon
+					assetKind={data.asset.kind}
+					fill={''}
+					class="shrink-0 ml-1 fill-tertiary stroke-tertiary"
+					size="16px"
+				/>
+				<span class="text-3xs truncate flex-1">
+					{data.asset.path}
+				</span>
+				{#if data.asset.kind === 'resource' && cachedResourceMetadata === undefined}
+					<Tooltip class={'pr-1 flex items-center justify-center'}>
+						<AlertTriangle size={16} class="text-orange-500" />
+						<svelte:fragment slot="text">Could not find resource</svelte:fragment>
+					</Tooltip>
+				{:else if isSelected && assetCanBeExplored(data.asset, cachedResourceMetadata) && !$userStore?.operator}
+					<ExploreAssetButton
+						btnClasses="rounded-none"
+						asset={data.asset}
+						noText
+						buttonVariant="contained"
+						s3FilePicker={flowGraphAssetsCtx.val.s3FilePicker}
+						dbManagerDrawer={flowGraphAssetsCtx.val.dbManagerDrawer}
+						_resourceMetadata={cachedResourceMetadata}
+					/>
+				{/if}
+			</div>
+			<svelte:fragment slot="text">
+				Used in {pluralize(usageCount, 'step')}<br />
+				<a
+					href={undefined}
+					class={twMerge(
+						'text-xs',
+						data.asset.kind === 'resource'
+							? 'text-blue-400 cursor-pointer'
+							: 'dark:text-tertiary text-tertiary-inverse'
+					)}
+					onclick={() => {
+						if (data.asset.kind === 'resource')
+							flowGraphAssetsCtx.val.resourceEditorDrawer?.initEdit(data.asset.path)
+					}}
+				>
+					{data.asset.path}
+				</a><br />
+				<span class="dark:text-tertiary text-tertiary-inverse text-xs"
+					>{formatAssetKind({ ...data.asset, metadata: cachedResourceMetadata })}</span
+				>
+			</svelte:fragment>
+		</Tooltip>
+	{/snippet}
+</NodeWrapper>

package/package/components/graph/renderers/nodes/AssetNode.svelte.d.ts

@@ -0,0 +1,21 @@
+export declare const NODE_WITH_READ_ASSET_Y_OFFSET = 45;
+export declare const NODE_WITH_WRITE_ASSET_Y_OFFSET = 45;
+export declare const READ_ASSET_Y_OFFSET = -45;
+export declare const WRITE_ASSET_Y_OFFSET = 64;
+export declare const assetDisplaysAsInputInFlowGraph: (a: {
+    access_type?: AssetUsageAccessType;
+}) => boolean;
+export declare const assetDisplaysAsOutputInFlowGraph: (a: {
+    access_type?: AssetUsageAccessType;
+}) => boolean;
+export declare function computeAssetNodes(nodes: Node[], edges: Edge[], assetsMap: Record<string, AssetWithAccessType[]>, extraData: any): [Node[], Edge[]];
+import type { AssetN } from '../../graphBuilder.svelte';
+import { type AssetWithAccessType } from '../../../assets/lib';
+import type { Edge, Node } from '@xyflow/svelte';
+import type { AssetUsageAccessType } from '../../../../gen';
+interface Props {
+    data: AssetN['data'];
+}
+declare const AssetNode: import("svelte").Component<Props, {}, "">;
+type AssetNode = ReturnType<typeof AssetNode>;
+export default AssetNode;

package/package/components/graph/renderers/nodes/AssetsOverflowedNode.svelte

@@ -0,0 +1,55 @@
+<!-- Displays as +n node instead of AssetNode when there are too many of themOverflowedAssetsNode -->
+
+<script lang="ts">import { twMerge } from 'tailwind-merge';
+import {} from '../../graphBuilder.svelte';
+import NodeWrapper from './NodeWrapper.svelte';
+import Popover from '../../../meltComponents/Popover.svelte';
+import AssetNode from './AssetNode.svelte';
+import { getContext } from 'svelte';
+import { assetEq } from '../../../assets/lib';
+let { data } = $props();
+const flowGraphAssetsCtx = getContext('FlowGraphAssetContext');
+let isOpen = $state(false);
+let includesSelected = $derived(data.overflowedAssets.some((asset) => assetEq(flowGraphAssetsCtx.val.selectedAsset, asset)));
+let wasOpenedBecauseOfExternalSelected = false;
+$effect(() => {
+    if (includesSelected && !isOpen) {
+        isOpen = true;
+        wasOpenedBecauseOfExternalSelected = true;
+    }
+    if (wasOpenedBecauseOfExternalSelected && !includesSelected) {
+        isOpen = false;
+        wasOpenedBecauseOfExternalSelected = false;
+    }
+});
+</script>
+
+<NodeWrapper>
+	{#snippet children({ darkMode })}
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<Popover
+			portal={null}
+			usePointerDownOutside
+			bind:isOpen
+			class={twMerge(
+				'!w-full text-2xs font-normal bg-surface h-6 pr-0.5 flex justify-center items-center rounded-sm text-tertiary border',
+				includesSelected ? 'bg-surface-secondary border-surface-inverse' : 'border-transparent',
+				'hover:bg-surface-secondary hover:border-surface-inverse active:opacity-55'
+			)}
+			placement="top"
+		>
+			<svelte:fragment slot="trigger">
+				+{data.overflowedAssets.length}
+			</svelte:fragment>
+			<svelte:fragment slot="content">
+				<ul>
+					{#each data.overflowedAssets as asset}
+						<li class="w-48">
+							<AssetNode data={{ asset }} />
+						</li>
+					{/each}
+				</ul>
+			</svelte:fragment>
+		</Popover>
+	{/snippet}
+</NodeWrapper>

package/package/components/graph/renderers/nodes/AssetsOverflowedNode.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type AssetsOverflowedN } from '../../graphBuilder.svelte';
+interface Props {
+    data: AssetsOverflowedN['data'];
+}
+declare const AssetsOverflowedNode: import("svelte").Component<Props, {}, "">;
+type AssetsOverflowedNode = ReturnType<typeof AssetsOverflowedNode>;
+export default AssetsOverflowedNode;

package/package/components/icons/AssetGenericIcon.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">import { Pyramid } from 'lucide-svelte';
+import AssetResIcon from './AssetResIcon.svelte';
+import AssetS3Icon from './AssetS3Icon.svelte';
+import AssetVarIcon from './AssetVarIcon.svelte';
+let { assetKind, fill, size, class: className = '' } = $props();
+</script>
+
+{#if assetKind == 's3object'}
+	<AssetS3Icon {fill} width={size} height={size} class={className} />
+{:else if assetKind == 'resource'}
+	<AssetResIcon {fill} width={size} height={size} class={className} />
+{:else if assetKind == 'variable'}
+	<AssetVarIcon {fill} width={size} height={size} class={className} />
+{:else}
+	<Pyramid {size} color={fill} class={'!fill-none ' + className} />
+{/if}

package/package/components/icons/AssetGenericIcon.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { AssetKind } from '../assets/lib';
+interface Props {
+    size?: string;
+    fill?: string;
+    assetKind: AssetKind;
+    class?: string;
+}
+declare const AssetGenericIcon: import("svelte").Component<Props, {}, "">;
+type AssetGenericIcon = ReturnType<typeof AssetGenericIcon>;
+export default AssetGenericIcon;

package/package/components/icons/AssetResIcon.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">"use strict";
+let { height = '24px', width = '24px', fill = 'black', class: className = '' } = $props();
+</script>
+
+<svg
+	{width}
+	{height}
+	class={className}
+	viewBox="0 0 22 22"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<g clip-path="url(#clip0_1_2)">
+		<path
+			d="M11.0586 0.306641C11.3106 0.315989 11.5582 0.378277 11.7822 0.495117C12.0247 0.621655 12.2331 0.805033 12.3897 1.0293L12.3916 1.03223L16.5889 7.10059L15.2285 7.59473L11.6963 2.4873V8.87695L10.2959 9.38574V2.4873L1.75196 14.8457C1.72867 14.8796 1.71294 14.9186 1.70508 14.959C1.69725 14.9995 1.69803 15.0418 1.70704 15.082C1.71605 15.1222 1.73351 15.1601 1.75782 15.1934C1.78213 15.2266 1.81309 15.2546 1.84864 15.2754H1.84766L7.75001 18.6445V20.2568L1.14844 16.4883L1.14258 16.4844C0.940872 16.3666 0.765826 16.2081 0.627936 16.0195C0.489969 15.8308 0.391887 15.6158 0.340827 15.3877C0.289772 15.1595 0.286682 14.9229 0.331061 14.6934C0.375447 14.4641 0.466395 14.2462 0.598639 14.0537L0.599616 14.0518L9.59962 1.03223L9.60157 1.0293C9.75823 0.804889 9.9673 0.62167 10.21 0.495117C10.4336 0.378564 10.6802 0.316161 10.9316 0.306641C10.9528 0.304686 10.9744 0.299805 10.9961 0.299805C11.0172 0.299841 11.038 0.304797 11.0586 0.306641Z"
+			{fill}
+			stroke="none"
+		/>
+		<path
+			d="M15 19.343L12.618 20.82C12.4314 20.936 12.2177 20.9973 12 20.9973C11.7823 20.9973 11.5686 20.936 11.382 20.82L9.582 19.7029C9.40485 19.5928 9.2582 19.4373 9.15623 19.2514C9.05427 19.0654 9.00045 18.8554 9 18.6417V16.6309C9.00045 16.4171 9.05427 16.2071 9.15623 16.0212C9.2582 15.8352 9.40485 15.6797 9.582 15.5696L12 14.0677M15 19.343V15.9296M15 19.343L17.382 20.82C17.5686 20.936 17.7823 20.9973 18 20.9973C18.2177 20.9973 18.4314 20.936 18.618 20.82L20.418 19.7029C20.5951 19.5928 20.7418 19.4373 20.8438 19.2514C20.9457 19.0654 20.9995 18.8554 21 18.6417V16.6309C20.9995 16.4171 20.9457 16.2071 20.8438 16.0212C20.7418 15.8352 20.5951 15.6797 20.418 15.5696L18 14.0677M15 15.9296L12 14.0677M15 15.9296L12 17.7914M15 15.9296L18 14.0677M15 15.9296L18 17.7914M15 15.9296V12.5162M12 14.0677V11.3556C12.0005 11.1419 12.0543 10.9319 12.1562 10.7459C12.2582 10.56 12.4049 10.4045 12.582 10.2944L14.382 9.17726C14.5686 9.06128 14.7823 9 15 9C15.2177 9 15.4314 9.06128 15.618 9.17726L17.418 10.2944C17.5951 10.4045 17.7418 10.56 17.8438 10.7459C17.9457 10.9319 17.9995 11.1419 18 11.3556V14.0677M12 17.7914L9.156 16.0227M12 17.7914V21M18 17.7914L20.844 16.0227M18 17.7914V21M15 12.5162L12.156 10.7474M15 12.5162L17.844 10.7474"
+			fill="none"
+			stroke={fill}
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+	</g>
+	<defs>
+		<clipPath id="clip0_1_2">
+			<rect width="22" height="22" fill="white" />
+		</clipPath>
+	</defs>
+</svg>

package/package/components/icons/AssetResIcon.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    height?: string;
+    width?: string;
+    fill?: string;
+    class?: string;
+}
+declare const AssetResIcon: import("svelte").Component<Props, {}, "">;
+type AssetResIcon = ReturnType<typeof AssetResIcon>;
+export default AssetResIcon;

package/package/components/icons/AssetS3Icon.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">"use strict";
+let { height = '24px', width = '24px', fill = 'black', class: className = '' } = $props();
+</script>
+
+<svg
+	{width}
+	{height}
+	class={className}
+	viewBox="0 0 22 22"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<g clip-path="url(#clip0_1_2)">
+		<path
+			d="M11.0586 0.306641C11.3106 0.315965 11.5581 0.378249 11.7822 0.495117C12.0248 0.621658 12.2331 0.804989 12.3897 1.0293L12.3916 1.03223L19.9785 12H18.2774L11.6963 2.4873V12H10.2959V2.4873L1.75196 14.8457C1.72866 14.8796 1.71294 14.9186 1.70508 14.959C1.69725 14.9995 1.69803 15.0418 1.70704 15.082C1.71605 15.1222 1.73351 15.1601 1.75782 15.1934C1.78214 15.2266 1.81306 15.2546 1.84864 15.2754H1.84766L7.75001 18.6445V20.2568L1.14844 16.4883L1.14258 16.4844C0.940841 16.3665 0.765835 16.2081 0.627936 16.0195C0.489961 15.8308 0.391884 15.6158 0.340827 15.3877C0.289772 15.1595 0.286682 14.9229 0.331061 14.6934C0.375444 14.464 0.466389 14.2462 0.598639 14.0537L0.599616 14.0518L9.59962 1.03223L9.60157 1.0293C9.75823 0.80485 9.96727 0.621686 10.21 0.495117C10.4336 0.378516 10.6802 0.316163 10.9316 0.306641C10.9529 0.304697 10.9743 0.299805 10.9961 0.299805C11.0173 0.299812 11.0379 0.304792 11.0586 0.306641Z"
+			{fill}
+			stroke="none"
+		/>
+		<path
+			d="M11.72 22.084C11.136 22.084 10.608 21.984 10.136 21.784C9.672 21.584 9.304 21.296 9.032 20.92C8.76 20.544 8.62 20.1 8.612 19.588H10.412C10.436 19.932 10.556 20.204 10.772 20.404C10.996 20.604 11.3 20.704 11.684 20.704C12.076 20.704 12.384 20.612 12.608 20.428C12.832 20.236 12.944 19.988 12.944 19.684C12.944 19.436 12.868 19.232 12.716 19.072C12.564 18.912 12.372 18.788 12.14 18.7C11.916 18.604 11.604 18.5 11.204 18.388C10.66 18.228 10.216 18.072 9.872 17.92C9.536 17.76 9.244 17.524 8.996 17.212C8.756 16.892 8.636 16.468 8.636 15.94C8.636 15.444 8.76 15.012 9.008 14.644C9.256 14.276 9.604 13.996 10.052 13.804C10.5 13.604 11.012 13.504 11.588 13.504C12.452 13.504 13.152 13.716 13.688 14.14C14.232 14.556 14.532 15.14 14.588 15.892H12.74C12.724 15.604 12.6 15.368 12.368 15.184C12.144 14.992 11.844 14.896 11.468 14.896C11.14 14.896 10.876 14.98 10.676 15.148C10.484 15.316 10.388 15.56 10.388 15.88C10.388 16.104 10.46 16.292 10.604 16.444C10.756 16.588 10.94 16.708 11.156 16.804C11.38 16.892 11.692 16.996 12.092 17.116C12.636 17.276 13.08 17.436 13.424 17.596C13.768 17.756 14.064 17.996 14.312 18.316C14.56 18.636 14.684 19.056 14.684 19.576C14.684 20.024 14.568 20.44 14.336 20.824C14.104 21.208 13.764 21.516 13.316 21.748C12.868 21.972 12.336 22.084 11.72 22.084ZM15.1325 15.556C15.1725 14.756 15.4525 14.14 15.9725 13.708C16.5005 13.268 17.1925 13.048 18.0485 13.048C18.6325 13.048 19.1325 13.152 19.5485 13.36C19.9645 13.56 20.2765 13.836 20.4845 14.188C20.7005 14.532 20.8085 14.924 20.8085 15.364C20.8085 15.868 20.6765 16.296 20.4125 16.648C20.1565 16.992 19.8485 17.224 19.4885 17.344V17.392C19.9525 17.536 20.3125 17.792 20.5685 18.16C20.8325 18.528 20.9645 19 20.9645 19.576C20.9645 20.056 20.8525 20.484 20.6285 20.86C20.4125 21.236 20.0885 21.532 19.6565 21.748C19.2325 21.956 18.7205 22.06 18.1205 22.06C17.2165 22.06 16.4805 21.832 15.9125 21.376C15.3445 20.92 15.0445 20.248 15.0125 19.36H16.6445C16.6605 19.752 16.7925 20.068 17.0405 20.308C17.2965 20.54 17.6445 20.656 18.0845 20.656C18.4925 20.656 18.8045 20.544 19.0205 20.32C19.2445 20.088 19.3565 19.792 19.3565 19.432C19.3565 18.952 19.2045 18.608 18.9005 18.4C18.5965 18.192 18.1245 18.088 17.4845 18.088H17.1365V16.708H17.4845C18.6205 16.708 19.1885 16.328 19.1885 15.568C19.1885 15.224 19.0845 14.956 18.8765 14.764C18.6765 14.572 18.3845 14.476 18.0005 14.476C17.6245 14.476 17.3325 14.58 17.1245 14.788C16.9245 14.988 16.8085 15.244 16.7765 15.556H15.1325Z"
+			{fill}
+			stroke="none"
+		/>
+	</g>
+	<defs>
+		<clipPath id="clip0_1_2">
+			<rect width="22" height="22" fill="white" />
+		</clipPath>
+	</defs>
+</svg>

package/package/components/icons/AssetS3Icon.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    height?: string;
+    width?: string;
+    fill?: string;
+    class?: string;
+}
+declare const AssetS3Icon: import("svelte").Component<Props, {}, "">;
+type AssetS3Icon = ReturnType<typeof AssetS3Icon>;
+export default AssetS3Icon;

package/package/components/icons/AssetVarIcon.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">"use strict";
+let { height = '24px', width = '24px', fill = 'black', class: className = '' } = $props();
+</script>
+
+<svg
+	{width}
+	{height}
+	class={className}
+	viewBox="0 0 22 22"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<g clip-path="url(#clip0_1_2)">
+		<path
+			d="M11.0586 0.306641C11.3106 0.315989 11.5582 0.378277 11.7822 0.495117C12.0247 0.621655 12.2331 0.805033 12.3897 1.0293L12.3916 1.03223L17.9033 9H16.2022L11.6963 2.4873V20.0986L12.75 19.4961V21.1094L12.333 21.3477L12.332 21.3486C11.925 21.5804 11.4645 21.7021 10.9961 21.7021C10.5275 21.7021 10.0664 21.5806 9.65919 21.3486V21.3477L1.14844 16.4883L1.14258 16.4844C0.940872 16.3666 0.765826 16.2081 0.627936 16.0195C0.489969 15.8308 0.391887 15.6158 0.340827 15.3877C0.289772 15.1595 0.286682 14.9229 0.331061 14.6934C0.375447 14.4641 0.466395 14.2462 0.598639 14.0537L0.599616 14.0518L9.59962 1.03223L9.60157 1.0293C9.75823 0.804889 9.9673 0.62167 10.21 0.495117C10.4336 0.378564 10.6802 0.316161 10.9316 0.306641C10.9528 0.304686 10.9744 0.299805 10.9961 0.299805C11.0172 0.299841 11.038 0.304797 11.0586 0.306641ZM1.75196 14.8457C1.72867 14.8796 1.71294 14.9186 1.70508 14.959C1.69725 14.9995 1.69803 15.0418 1.70704 15.082C1.71605 15.1222 1.73351 15.1601 1.75782 15.1934C1.78213 15.2266 1.81309 15.2546 1.84864 15.2754H1.84766L10.2959 20.0986V2.4873L1.75196 14.8457Z"
+			{fill}
+			stroke="none"
+		/>
+		<path
+			d="M18 10.8496C18.1472 10.8496 18.2858 10.9138 18.3857 11.0225C18.4851 11.1306 18.539 11.2749 18.5391 11.4229V11.9785H20.5928C20.7397 11.9786 20.8777 12.042 20.9775 12.1504C21.077 12.2586 21.1318 12.4037 21.1318 12.5518C21.1317 12.6997 21.0769 12.844 20.9775 12.9521C20.8777 13.0606 20.7397 13.124 20.5928 13.124H18.5391V15.9268H19.2959C19.9244 15.9268 20.5246 16.1988 20.9648 16.6777C21.4047 17.1563 21.6504 17.8029 21.6504 18.4746C21.6503 19.1463 21.4046 19.793 20.9648 20.2715C20.5246 20.7503 19.9243 21.0215 19.2959 21.0215H18.5391V21.5771C18.539 21.7251 18.4851 21.8694 18.3857 21.9775C18.2858 22.0862 18.1472 22.1504 18 22.1504C17.8528 22.1504 17.7142 22.0862 17.6143 21.9775C17.5149 21.8694 17.461 21.7251 17.4609 21.5771V21.0215H14.8887C14.7417 21.0214 14.6037 20.958 14.5039 20.8496C14.4044 20.7414 14.3496 20.5963 14.3496 20.4482C14.3497 20.3003 14.4045 20.156 14.5039 20.0479C14.6037 19.9394 14.7417 19.876 14.8887 19.876H17.4609V17.0732H16.7041C16.0756 17.0732 15.4754 16.8012 15.0352 16.3223C14.5953 15.8437 14.3496 15.1971 14.3496 14.5254C14.3497 13.8537 14.5954 13.207 15.0352 12.7285C15.4754 12.2497 16.0757 11.9785 16.7041 11.9785H17.4609V11.4229C17.461 11.2749 17.5149 11.1306 17.6143 11.0225C17.7142 10.9138 17.8528 10.8496 18 10.8496ZM18.5391 19.876H19.2959C19.63 19.876 19.9539 19.7313 20.1943 19.4697C20.4351 19.2078 20.5722 18.85 20.5723 18.4746C20.5723 18.0991 20.4352 17.7405 20.1943 17.4785C19.9539 17.217 19.63 17.0732 19.2959 17.0732H18.5391V19.876ZM16.7041 13.124C16.37 13.124 16.0461 13.2687 15.8057 13.5303C15.5649 13.7922 15.4278 14.15 15.4277 14.5254C15.4277 14.9009 15.5648 15.2595 15.8057 15.5215C16.0461 15.783 16.37 15.9268 16.7041 15.9268H17.4609V13.124H16.7041Z"
+			{fill}
+			stroke={fill}
+			stroke-width="0.3"
+		/>
+	</g>
+	<defs>
+		<clipPath id="clip0_1_2">
+			<rect width="22" height="22" fill="white" />
+		</clipPath>
+	</defs>
+</svg>

package/package/components/icons/AssetVarIcon.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    height?: string;
+    width?: string;
+    fill?: string;
+    class?: string;
+}
+declare const AssetVarIcon: import("svelte").Component<Props, {}, "">;
+type AssetVarIcon = ReturnType<typeof AssetVarIcon>;
+export default AssetVarIcon;

package/package/components/meltComponents/Popover.svelte

@@ -30,12 +30,14 @@ export let extraProps = {};
 export let disabled = false;
 export let documentationLink = undefined;
 export let disableFocusTrap = false;
+export let escapeBehavior = 'close';
 let fullScreen = false;
 const dispatch = createEventDispatcher();
 const { elements: { trigger, content, arrow, close: closeElement, overlay }, states, options: { closeOnOutsideClick: closeOnOutsideClickOption, positioning }, ids: { content: popoverId } } = createPopover({
     forceVisible: true,
     portal,
     disableFocusTrap,
+    escapeBehavior,
     onOpenChange: ({ curr, next }) => {
         if (curr != next) {
             dispatch('openChange', next);

package/package/components/meltComponents/Popover.svelte.d.ts

@@ -1,5 +1,6 @@
 import type { Placement } from '@floating-ui/core';
 import type { FloatingConfig } from '@melt-ui/svelte/internal/actions/floating';
+import type { EscapeBehaviorType } from '@melt-ui/svelte/internal/actions';
 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;
@@ -32,6 +33,7 @@ declare const Popover: $$__sveltets_2_IsomorphicComponent<{
     disabled?: boolean | undefined;
     documentationLink?: string | undefined | undefined;
     disableFocusTrap?: boolean | undefined;
+    escapeBehavior?: EscapeBehaviorType | undefined;
     isOpen?: boolean | undefined;
     close?: (() => void) | undefined;
     open?: (() => void) | undefined;

package/package/components/schema/EditableSchemaSdkWrapper.svelte

@@ -1,9 +1,6 @@
 <script lang="ts">import EditableSchemaWrapper from './EditableSchemaWrapper.svelte';
 let { schema: oldSchema, ...props } = $props();
 let schema = $state(oldSchema);
-$effect(() => {
-    schema = oldSchema;
-});
 </script>
 
-<EditableSchemaWrapper {schema} {...props} />
+<EditableSchemaWrapper {schema} {...props} />

package/package/components/script_builder.d.ts

@@ -1,4 +1,5 @@
 import type { NewScript } from '../gen';
+import type { AssetWithAccessType } from './assets/lib';
 import type { ScriptBuilderWhitelabelCustomUi } from './custom_ui';
 import type { DiffDrawerI } from './diff_drawer';
 import type { ScriptBuilderFunctionExports } from './scriptBuilder';
@@ -7,6 +8,7 @@ import type { NewScriptWithDraftAndDraftTriggers, Trigger } from './triggers/uti
 export interface ScriptBuilderProps {
     script: NewScript & {
         draft_triggers?: Trigger[];
+        fallback_access_types?: AssetWithAccessType[];
     };
     disableAi?: boolean;
     fullyLoaded?: boolean;

package/package/components/settings/WorkspaceOperatorSettings.svelte

@@ -15,6 +15,7 @@ let operatorWorkspaceSettings = $state({
     schedules: true,
     resources: true,
     variables: true,
+    assets: false,
     triggers: true,
     audit_logs: true,
     groups: true,
@@ -25,6 +26,7 @@ let originalSettings = $state({ ...untrack(() => operatorWorkspaceSettings) });
 let isChanged = $state(false);
 let currentWorkspace = $state(null);
 async function saveSettings() {
+    console.log('Saving operator settings:', operatorWorkspaceSettings);
     try {
         await WorkspaceService.updateOperatorSettings({
             workspace: $workspaceStore,
@@ -44,6 +46,7 @@ const descriptions = {
     schedules: { title: 'Schedules', description: 'View schedules' },
     resources: { title: 'Resources', description: 'View resources' },
     variables: { title: 'Variables', description: 'View variables' },
+    assets: { title: 'Assets', description: 'View assets' },
     triggers: { title: 'Triggers', description: 'View all triggers (HTTP, Websocket, Kafka)' },
     audit_logs: { title: 'Audit Logs', description: 'View audit logs' },
     groups: { title: 'Groups', description: 'View groups and group members' },
@@ -59,7 +62,10 @@ $effect(() => {
                 workspace: $workspaceStore
             });
             if (settings.operator_settings !== null) {
-                operatorWorkspaceSettings = settings.operator_settings ?? operatorWorkspaceSettings;
+                operatorWorkspaceSettings = {
+                    ...operatorWorkspaceSettings,
+                    ...(settings.operator_settings ?? {})
+                };
                 originalSettings = { ...operatorWorkspaceSettings };
             }
         })();
@@ -68,21 +74,8 @@ $effect(() => {
 $effect(() => {
     isChanged = JSON.stringify(operatorWorkspaceSettings) !== JSON.stringify(originalSettings);
 });
-let enableAllState = $derived((() => {
-    const values = Object.values(operatorWorkspaceSettings);
-    if (values.every((v) => v === true))
-        return 'true';
-    if (values.every((v) => v === false))
-        return 'false';
-    return undefined;
-})());
-function toggleAllSettings(event) {
-    const newValue = event.detail === true;
-    Object.keys(operatorWorkspaceSettings).forEach((key) => {
-        operatorWorkspaceSettings[key] = newValue;
-    });
-    operatorWorkspaceSettings = { ...operatorWorkspaceSettings };
-}
+const allDisabled = $derived(Object.values(operatorWorkspaceSettings).every((value) => value === false));
+const allEnabled = $derived(Object.values(operatorWorkspaceSettings).every((value) => value === true));
 </script>
 
 <div class="mt-6">
@@ -111,7 +104,17 @@ function toggleAllSettings(event) {
 						<Cell head first>Section</Cell>
 						<Cell head>Description</Cell>
 						<Cell head last>
-							<ToggleButtonGroup bind:selected={enableAllState} on:selected={toggleAllSettings}>
+							<ToggleButtonGroup
+								bind:selected={
+									() => (allDisabled ? 'false' : allEnabled ? 'true' : ''),
+									(v) => {
+										Object.keys(operatorWorkspaceSettings).forEach((key) => {
+											if (v === 'true') operatorWorkspaceSettings[key] = true
+											if (v === 'false') operatorWorkspaceSettings[key] = false
+										})
+									}
+								}
+							>
 								{#snippet children({ item })}
 									<ToggleButton
 										icon={EyeIcon}

package/package/components/sidebar/OperatorMenu.svelte

@@ -33,6 +33,11 @@ let secondMenuLinks = $derived([
         id: 'variables',
         href: `${base}/variables`
     },
+    {
+        label: 'Assets',
+        id: 'assets',
+        href: `${base}/assets`
+    },
     {
         label: 'Custom HTTP routes',
         id: 'triggers',