windmill-components 1.77.0 → 1.79.0

package/components/common/button/Button.svelte.d.ts

@@ -6,7 +6,7 @@ declare const __propDef: {
         [x: string]: any;
         size?: ButtonType.Size | undefined;
         spacingSize?: ButtonType.Size | undefined;
-        color?: "none" | "blue" | "gray" | "red" | "green" | "dark" | "light" | undefined;
+        color?: "blue" | "gray" | "red" | "green" | "dark" | "light" | "none" | undefined;
         variant?: ButtonType.Variant | undefined;
         btnClasses?: string | undefined;
         disabled?: boolean | undefined;

package/components/common/button/ButtonPopup.svelte.d.ts

@@ -4,7 +4,7 @@ import { ButtonType } from '..';
 declare const __propDef: {
     props: {
         size?: ButtonType.Size | undefined;
-        color?: "none" | "blue" | "gray" | "red" | "green" | "dark" | "light" | undefined;
+        color?: "blue" | "gray" | "red" | "green" | "dark" | "light" | "none" | undefined;
         variant?: ButtonType.Variant | undefined;
         mainClasses?: string | undefined;
         toggleClasses?: string | undefined;

package/components/common/menu/Menu.svelte.d.ts

@@ -3,7 +3,7 @@ declare const __propDef: {
     props: {
         noMinW?: boolean | undefined;
         show?: boolean | undefined;
-        placement?: "top-start" | "top-end" | "bottom-start" | "bottom-end" | "top-center" | "bottom-center" | undefined;
+        placement?: "top-start" | "top-end" | "top-center" | "bottom-start" | "bottom-end" | "bottom-center" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/flows/flowStore.js

@@ -1,4 +1,4 @@
-import { get, writable } from 'svelte/store';
+import { writable } from 'svelte/store';
 import { initFlowState } from './flowState';
 import { numberToChars } from './utils';
 export const importFlowStore = writable(undefined);

package/components/graph/FlowGraph.svelte

@@ -16,7 +16,6 @@ export let notSelectable = false;
 export let flowModuleStates = undefined;
 export let rebuildOnChange = undefined;
 export let selectedId = writable(undefined);
-export let initialZoom = 1.0;
 export let insertable = false;
 export let moving = undefined;
 export let scroll = false;
@@ -436,7 +435,6 @@ function createErrorHandler(mod, parent_module) {
 		<Svelvet
 			highlightEdges={false}
 			locked
-			{initialZoom}
 			{nodes}
 			{width}
 			{edges}

package/components/graph/FlowGraph.svelte.d.ts

@@ -13,7 +13,6 @@ declare const __propDef: {
         flowModuleStates?: Record<string, GraphModuleState> | undefined;
         rebuildOnChange?: any;
         selectedId?: Writable<string | undefined> | undefined;
-        initialZoom?: number | undefined;
         insertable?: boolean | undefined;
         moving?: string | undefined;
         scroll?: boolean | undefined;

package/components/graph/svelvet/container/views/GraphView.svelte

@@ -13,37 +13,14 @@ import { onDestroy } from 'svelte';
 export let canvasId;
 export let width;
 export let height;
-export let initialZoom = 3;
-export let initialLocation;
 export let boundary = false;
-export let minimap = false;
 export let scroll = false;
 // here we lookup the store using the unique key
 const store = findStore(canvasId);
-const { edgesStore, nodesStore, anchorsStore, potentialAnchorsStore, temporaryEdgeStore, resizeNodesStore, nodeSelected, backgroundStore, movementStore, widthStore, heightStore, d3Scale, collapsibleStore } = store;
+const { edgesStore, nodesStore, anchorsStore, nodeSelected, backgroundStore, movementStore, widthStore, heightStore, d3Scale, collapsibleStore } = store;
 $: nodes = Object.values($nodesStore);
 $: edges = Object.values($edgesStore);
 $: anchors = Object.values($anchorsStore);
-$: resizeNodes = Object.values($resizeNodesStore);
-$: potentialAnchors = Object.values($potentialAnchorsStore);
-$: tempEdges = $temporaryEdgeStore;
-/*
-This block of code is responsible for reactivity of the collapsible feature
-When collaspsibleStore changes, nodes/edges/resizeNodes/anchors are filtered so that
-only the visible ones are displayed
-*/
-let filteredNodes;
-let filteredEdges;
-let filteredResizeNodes;
-let filteredAnchors;
-$: {
-    const tmp = $collapsibleStore; // assignment is necessary for reactivity
-    const obj = filterByCollapsible(store, nodes, resizeNodes, anchors, edges);
-    filteredNodes = obj['filteredNodes'];
-    filteredEdges = obj['filteredEdges'];
-    filteredResizeNodes = obj['filteredResizeNodes'];
-    filteredAnchors = obj['filteredAnchors'];
-}
 // declaring the grid and dot size for d3's transformations and zoom
 const gridSize = 15;
 const dotSize = 10;
@@ -142,7 +119,7 @@ function handleZoom(e) {
 		<div class={`Nodes Nodes-${canvasId}`} on:contextmenu|preventDefault>
 			<!-- This container is transformed by d3zoom -->
 			<div class={`Node Node-${canvasId}`}>
-				{#each filteredNodes as node}
+				{#each nodes as node}
 					{#if node.data.html}
 						<Node {node} {canvasId} nodeId={node.id}>{@html node.data.html}</Node>
 					{:else if node.data.custom}
@@ -193,7 +170,7 @@ function handleZoom(e) {
 
 		<!-- <g> tag defines which edge type to render depending on properties of edge object -->
 		<g>
-			{#each filteredEdges as edge}
+			{#each edges as edge}
 				{#if edge.type === 'smoothstep'}
 					<SmoothStepEdge {edge} {canvasId} />
 				{:else if edge.type === 'step'}
@@ -232,8 +209,6 @@ function handleZoom(e) {
 		width: 24px;
 	}
 
-	svg {
-	}
 	.Nodes {
 		position: absolute;
 		width: 100%;

package/components/graph/svelvet/container/views/GraphView.svelte.d.ts

@@ -4,10 +4,7 @@ declare const __propDef: {
         canvasId: string;
         width: number;
         height: number;
-        initialZoom?: number | undefined;
-        initialLocation: any;
         boundary?: boolean | undefined;
-        minimap?: boolean | undefined;
         scroll?: boolean | undefined;
     };
     events: {

package/components/graph/svelvet/container/views/Svelvet.svelte

@@ -6,7 +6,6 @@ import { sanitizeCanvasOptions, sanitizeUserNodesAndEdges } from '../controllers
 export let nodes; // TODO: update type to make possible user id being a number
 export let edges; // TODO: update type to make possible user id being a number
 export let bgColor = '#ffffff'; // this is used to set the background color of the the Svelvet canvas
-export let minimap = false;
 export let width = 600;
 export let height = 600;
 export let background = true;
@@ -15,14 +14,10 @@ export let canvasId = pkStringGenerator();
 export let snap = false;
 export let snapTo = 30;
 export let nodeCreate = false;
-export let initialZoom = 3;
-export let initialLocation = { x: 0, y: 0 };
 export let boundary = false;
 export let collapsible = false;
-export let shareable = false; // used for "importExport" feature
 export let locked = false; // if true, node movement is disabled
 export let editable = false;
-export let resizable = true;
 export let highlightEdges = true;
 export let scroll = false;
 // generates a unique string for each svelvet component's unique store instance
@@ -52,7 +47,6 @@ onMount(() => {
         store.collapsibleOption.set(collapsible);
         store.lockedOption.set(locked);
         store.editableOption.set(editable);
-        store.resizableOption.set(resizable);
         store.highlightEdgesOption.set(highlightEdges);
         // make sure that all canvas options are compatible
         sanitizeCanvasOptions(store);
@@ -86,7 +80,6 @@ afterUpdate(() => {
         store.collapsibleOption.set(collapsible);
         store.lockedOption.set(locked);
         store.editableOption.set(editable);
-        store.resizableOption.set(resizable);
         store.highlightEdgesOption.set(highlightEdges);
         // make sure that all canvas options are compatible
         sanitizeCanvasOptions(store);
@@ -109,16 +102,7 @@ afterUpdate(() => {
 	{#if error != ''}
 		<div class="error text-red-600 center-center p-4">{error}</div>
 	{:else}
-		<GraphView
-			{scroll}
-			{canvasId}
-			{width}
-			{height}
-			{initialLocation}
-			{initialZoom}
-			{boundary}
-			{minimap}
-		/>
+		<GraphView {scroll} {canvasId} {width} {height} {boundary} />
 	{/if}
 </div>
 

package/components/graph/svelvet/container/views/Svelvet.svelte.d.ts

@@ -5,7 +5,6 @@ declare const __propDef: {
         nodes: UserNodeType[];
         edges: UserEdgeType[];
         bgColor?: string | undefined;
-        minimap?: boolean | undefined;
         width?: number | undefined;
         height?: number | undefined;
         background?: boolean | undefined;
@@ -14,17 +13,10 @@ declare const __propDef: {
         snap?: boolean | undefined;
         snapTo?: number | undefined;
         nodeCreate?: boolean | undefined;
-        initialZoom?: number | undefined;
-        initialLocation?: {
-            x: number;
-            y: number;
-        } | undefined;
         boundary?: boolean | undefined;
         collapsible?: boolean | undefined;
-        shareable?: boolean | undefined;
         locked?: boolean | undefined;
         editable?: boolean | undefined;
-        resizable?: boolean | undefined;
         highlightEdges?: boolean | undefined;
         scroll?: boolean | undefined;
     };

package/components/graph/svelvet/customCss/controllers/getCss.js

@@ -43,15 +43,4 @@ export const forceCssHeightAndWidth = (store, node) => {
     });
     // move the node a bit to force update to anchors, potential anchors
     node.setPositionFromMovement(0, 0);
-    // update the position of the resize node. TODO: this should be refactored so that it cascades from movement
-    store.resizeNodesStore.update((resizeNodes) => {
-        for (let resizeNode of Object.values(resizeNodes)) {
-            if (resizeNode.nodeId === node.id) {
-                // set resizeNode position to bottom left corner of Node
-                resizeNode.positionX = node.positionX + node.width;
-                resizeNode.positionY = node.positionY + node.height;
-            }
-        }
-        return { ...resizeNodes };
-    });
 };

package/components/graph/svelvet/edges/controllers/util.js

@@ -1,5 +1,4 @@
-import { writable, derived, get, readable } from 'svelte/store';
-import { getNodeById } from '../../nodes/controllers/util';
+import { get } from 'svelte/store';
 /**
  * Finds all Anchors that matches the conditions specified in the filter parameter from a Svelvet store and returns these Anchors in an array.
  *

package/components/graph/svelvet/edges/views/Edges/SmoothStepEdge.svelte.d.ts

@@ -2,8 +2,8 @@
 /** @typedef {typeof __propDef.events}  SmoothStepEdgeEvents */
 /** @typedef {typeof __propDef.slots}  SmoothStepEdgeSlots */
 export default class SmoothStepEdge extends SvelteComponentTyped<{
-    canvasId: any;
     edge: any;
+    canvasId: any;
     borderRadius?: number | undefined;
     getSmoothStepPath?: (({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, borderRadius, centerX, centerY, }: {
         sourceX: any;
@@ -37,8 +37,8 @@ export type SmoothStepEdgeSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        canvasId: any;
         edge: any;
+        canvasId: any;
         borderRadius?: number | undefined;
         getSmoothStepPath?: (({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, borderRadius, centerX, centerY, }: {
             sourceX: any;

package/components/graph/svelvet/nodes/controllers/util.js

@@ -1,4 +1,4 @@
-import { writable, derived, get, readable } from 'svelte/store';
+import { get } from 'svelte/store';
 /**
  * getNodeById will look for the targeted Node that has the same id provided in the Svelvet component store.
  *

package/components/graph/svelvet/nodes/models/Node.d.ts

@@ -48,10 +48,6 @@ export declare class Node implements NodeType {
      * @param movementY The mouse movement value on the Y-axis
      */
     setSizeFromMovement(movementX: number, movementY: number): void;
-    /**
-     * delete will handle the deletion of a Node (also waterfall down to delete anchors and edges)
-     */
-    delete(): void;
     /**
      * setExportableData is going to construct an object that holds all the node data that can be exported. This method is used for Exporting Diagrams feature.
      *

package/components/graph/svelvet/nodes/models/Node.js

@@ -1,7 +1,6 @@
-import { writable, derived, get, readable } from 'svelte/store';
+import { get } from 'svelte/store';
 import { stores } from '../../store/models/store';
 import { getAnchors, getEdgeById } from '../../edges/controllers/util';
-import { getResizeNodes } from '../../resizableNodes/controllers/util';
 /** A Node class that implements NodeType interface
  * @param {string} id The id of the Node
  * @param {number} positionX The X-axis position of the Node (left top corner of the Node)
@@ -60,7 +59,7 @@ export class Node {
      * @param {number} movementY The mouse movement value on the Y-axis
      */
     setPositionFromMovement(movementX, movementY) {
-        const { nodesStore, anchorsStore, resizeNodesStore, potentialAnchorsStore, boundary, lockedOption, } = stores[this.canvasId];
+        const { nodesStore, anchorsStore, potentialAnchorsStore, boundary, lockedOption } = stores[this.canvasId];
         if (get(lockedOption))
             return; // don't do anything if locked is enabled
         // boundary sets the boundary of the canvas, or else it is false if their is no boundary
@@ -100,15 +99,6 @@ export class Node {
             }
             return { ...anchors };
         });
-        resizeNodesStore.update((resAnchors) => {
-            for (const anchorId in resAnchors) {
-                if (resAnchors[anchorId].nodeId === this.id) {
-                    resAnchors[anchorId].setPosition(movementX, movementY);
-                    //resAnchors[anchorId].setPosition(movementX, movementY);
-                }
-            }
-            return { ...resAnchors };
-        });
     }
     /**
      * setSizeFromMovement will update the width and height of the Node when user resizes the Node by dragging at the right bottom corner (where the ResizedNode attached), reflect the changes in real time in the nodesStore, and also cascade the changes to all relative elements like Anchors and potential Anchors.
@@ -140,34 +130,6 @@ export class Node {
             return { ...anchors };
         });
     }
-    /**
-     * delete will handle the deletion of a Node (also waterfall down to delete anchors and edges)
-     */
-    delete() {
-        const store = stores[this.canvasId];
-        const { nodesStore, anchorsStore, edgesStore } = stores[this.canvasId];
-        nodesStore.update((nodes) => {
-            for (const nodeId in nodes) {
-                if (nodes[nodeId].id === this.id) {
-                    delete nodes[nodeId];
-                }
-            }
-            return { ...nodes };
-        });
-        // variable `anchors` is an array of Anchor objects on the node
-        const anchors = getAnchors(store, { nodeId: this.id });
-        for (let anchorSelf of anchors) {
-            const edgeId = anchorSelf.edgeId;
-            const edge = getEdgeById(store, edgeId);
-            edge.delete(); // this also deletes anchors. TODO: maybe this should be renamed to explicitly say
-        }
-        // delete the resize nodes
-        const resizeNodesArr = getResizeNodes(store, { nodeId: this.id });
-        // there should be only 1 resize node if option is enabled, 0 if not enabled
-        for (const resizeNode of resizeNodesArr) {
-            resizeNode.delete();
-        }
-    }
     /**
      * setExportableData is going to construct an object that holds all the node data that can be exported. This method is used for Exporting Diagrams feature.
      *
@@ -188,7 +150,7 @@ export class Node {
             image: this.image,
             src: this.src,
             childNodes: this.childNodes,
-            customClassName: this.className,
+            customClassName: this.className
         };
         return exportableData;
     }

package/components/graph/svelvet/store/controllers/storeApi.js

@@ -32,7 +32,7 @@ populateSvelvetStoreFromUserInput(canvasId, nodes, edges)
 */
 import { stores } from '../models/store';
 import { writable, get } from 'svelte/store';
-import { populateAnchorsStore, populateNodesStore, populateEdgesStore, populateResizeNodeStore, } from './util';
+import { populateAnchorsStore, populateNodesStore, populateEdgesStore } from './util';
 import { populateCollapsibleStore } from '../../collapsible/controllers/util';
 /**
  * findStore is going to return the target Svelvet store with the canvasId provided as argument.
@@ -62,7 +62,6 @@ export function createStoreEmpty(canvasId) {
         nodesStore: writable({}),
         edgesStore: writable({}),
         anchorsStore: writable({}),
-        resizeNodesStore: writable({}),
         potentialAnchorsStore: writable({}),
         widthStore: writable(600),
         heightStore: writable(600),
@@ -81,8 +80,7 @@ export function createStoreEmpty(canvasId) {
         lockedOption: writable(false),
         editableOption: writable(false),
         d3ZoomParameters: writable({}),
-        resizableOption: writable(true),
-        highlightEdgesOption: writable(true), // option to turn on/off highlightable edges
+        highlightEdgesOption: writable(true) // option to turn on/off highlightable edges
     };
     return stores[canvasId];
 }
@@ -102,9 +100,6 @@ export function populateSvelvetStoreFromUserInput(canvasId, nodes, edges) {
     populateAnchorsStore(store, nodes, edges, canvasId);
     // populate edges
     populateEdgesStore(store, edges, canvasId);
-    //populate resize Store
-    if (get(store.resizableOption))
-        populateResizeNodeStore(store, nodes, canvasId);
     // populatate collapsible objects if "collapsible" feature is turned on
     if (get(store.collapsibleOption))
         populateCollapsibleStore(store, nodes, edges, canvasId);

package/components/graph/svelvet/store/controllers/util.d.ts

@@ -22,10 +22,3 @@ export declare function populateAnchorsStore(store: StoreType, nodes: UserNodeTy
  * @param canvasId The canvasId of the Svelvet component that holds the nodes
  */
 export declare function populateNodesStore(store: StoreType, nodes: UserNodeType[], canvasId: string): void;
-/**
- * Populates the resizeNodeStore. If a Node is resizable, a small ResizeNode object is going to be attached to the Node's right bottom corner to react to the mouse drag.
- * @param store The Svelvet store containing the state of the Svelvet component
- * @param nodes An array of user specifed nodes (NOT the same as Node)
- * @param canvasId The canvasId of the Svelvet component that holds the resizeNodes
- */
-export declare function populateResizeNodeStore(store: StoreType, nodes: UserNodeType[], canvasId: string): void;

package/components/graph/svelvet/store/controllers/util.js

@@ -1,25 +1,9 @@
-const pkStringGenerator = () => (Math.random() + 1).toString(36).substring(7);
-import { rightCb, leftCb, topCb, bottomCb, } from '../../edges/controllers/anchorCbUser'; // these are callbacks used to calculate anchor position relative to node
-import { dynamicCbCreator, fixedCbCreator, } from '../../edges/controllers/anchorCbDev';
-import { ResizeNode } from '../../resizableNodes/models/ResizeNode';
+const pkStringGenerator = () => (Math.random() + 1).toString(36).substring(7); // these are callbacks used to calculate anchor position relative to node
+import { dynamicCbCreator, fixedCbCreator } from '../../edges/controllers/anchorCbDev';
 import { Anchor } from '../../edges/models/Anchor';
 import { Node } from '../../nodes/models/Node';
 import { Edge } from '../../edges/models/Edge';
-import { writable, derived, get, readable } from 'svelte/store';
-import { getEdgeById, getAnchors } from '../../edges/controllers/util';
-/**
- * Creates resize node on the bottom right corner of the targeted Node
- * @param canvasId The canvasId of the Svelvet component that holds the targeted Node
- * @param nodeId The id of the Node that the resize node attached to
- * @param posX The number of pixels on the x-axis relative to the left top corner of the targeted Node
- * @param posY The number of pixels on the y-axis relative to the left top corner of the targeted Node
- * @returns A ReziseNode object with randomized id, canvasId, nodeId, posX, and posY
- */
-function createResizeNode(canvasId, nodeId, posX, posY) {
-    const id = pkStringGenerator();
-    const resizeNode = new ResizeNode(id, canvasId, nodeId, posX, posY);
-    return resizeNode;
-}
+import { getAnchors } from '../../edges/controllers/util';
 /**
  * Creates an Anchor on the targeted Node with infomation the userNode holds
  * @param store An object containing the state of the Svelvet component. You can access the following through `store`: nodesStore, edgesStore, anchorsStore, etc.
@@ -70,7 +54,7 @@ export function populateEdgesStore(store, edges, canvasId) {
         // source is node.id for the source node
         // target is node.id for the target node
         // We need to get the anchors
-        const { source: sourceNodeId, target: targetNodeId, id: edgeId, type, label, labelBgColor, labelTextColor, edgeColor, animate, noHandle, arrow, clickCallback, className, } = userEdge;
+        const { source: sourceNodeId, target: targetNodeId, id: edgeId, type, label, labelBgColor, labelTextColor, edgeColor, animate, noHandle, arrow, clickCallback, className } = userEdge;
         const anchors = getAnchors(store, { edgeId: edgeId });
         // check that we have two anchors for every edge
         if (anchors.length !== 2)
@@ -162,19 +146,3 @@ export function populateNodesStore(store, nodes, canvasId) {
     // This is actually what sets the store
     store.nodesStore.set(nodesStore);
 }
-/**
- * Populates the resizeNodeStore. If a Node is resizable, a small ResizeNode object is going to be attached to the Node's right bottom corner to react to the mouse drag.
- * @param store The Svelvet store containing the state of the Svelvet component
- * @param nodes An array of user specifed nodes (NOT the same as Node)
- * @param canvasId The canvasId of the Svelvet component that holds the resizeNodes
- */
-export function populateResizeNodeStore(store, nodes, canvasId) {
-    const resizeNodeStore = {};
-    for (let i = 0; i < nodes.length; i++) {
-        const userNode = nodes[i];
-        const { id, width, height, position } = userNode;
-        const resizeNode = createResizeNode(canvasId, id, position.x + width, position.y + height);
-        resizeNodeStore[resizeNode.id] = resizeNode;
-    }
-    store.resizeNodesStore.set(resizeNodeStore);
-}

package/components/graph/svelvet/store/types/types.d.ts

@@ -23,9 +23,6 @@ export interface StoreType {
     anchorsStore: Writable<{
         [key: string]: AnchorType;
     }>;
-    resizeNodesStore: Writable<{
-        [key: string]: ResizeNodeType;
-    }>;
     potentialAnchorsStore: Writable<{
         [key: string]: PotentialAnchorType;
     }>;
@@ -50,7 +47,6 @@ export interface StoreType {
     d3ZoomParameters: Writable<{
         [key: string]: number;
     }>;
-    resizableOption: Writable<boolean>;
     highlightEdgesOption: Writable<boolean>;
 }
 export interface PositionType {
@@ -76,7 +72,6 @@ export interface NodeType {
     };
     canvasId: string;
     setPositionFromMovement: Function;
-    delete: Function;
     setSizeFromMovement: Function;
     setExportableData: Function;
     borderColor: string;

package/components/home/ItemsList.svelte

@@ -238,7 +238,7 @@ let archived = false;
 	</div>
 	<div class="relative">
 		<ListFilters bind:selectedFilter={ownerFilter} filters={owners} />
-		{#if !loading}
+		{#if !loading && filteredItems?.length}
 			<div class="absolute -bottom-2 right-0 bg-white/90">
 				<Toggle size="xs" bind:checked={archived} options={{ right: 'Show archived' }} /></div
 			>

package/components/propertyPicker/ObjectViewer.svelte

@@ -124,7 +124,7 @@ function selectProp(key, value) {
 {:else if topBrackets}
 	<span class="text-black">{openBracket}{closeBracket}</span>
 {:else}
-	<span class="text-gray-600 text-xs">No items</span>
+	<span class="text-gray-600 text-xs ml-2">No items</span>
 {/if}
 
 <style>

package/components/propertyPicker/PropPicker.svelte

@@ -72,7 +72,10 @@ async function loadResources() {
 				pureViewer={!$propPickerConfig}
 				json={flowInputsFiltered}
 				on:select={(e) => {
-					dispatch('select', `flow_input.${e.detail}`)
+					dispatch(
+						'select',
+						e.detail?.startsWith('[') ? `flow_input${e.detail}` : `flow_input.${e.detail}`
+					)
 				}}
 			/>
 		</div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "windmill-components",
-  "version": "1.77.0",
+  "version": "1.79.0",
   "devDependencies": {
     "@playwright/test": "^1.31.1",
     "@sveltejs/adapter-static": "^1.0.0",
@@ -10,6 +10,7 @@
     "@tailwindcss/typography": "^0.5.8",
     "@types/d3": "^7.4.0",
     "@types/d3-zoom": "^3.0.2",
+    "@types/lodash": "^4.14.191",
     "@types/node": "^18.11.18",
     "@types/vscode": "~1.74.0",
     "@typescript-eslint/eslint-plugin": "^5.49.0",
@@ -65,6 +66,7 @@
     "date-fns": "^2.29.3",
     "fast-equals": "^4.0.3",
     "highlight.js": "^11.7.0",
+    "lodash": "^4.17.21",
     "lucide-svelte": "^0.115.0",
     "monaco-editor": "0.33.0",
     "monaco-editor-workers": "0.33.0",
@@ -126,6 +128,8 @@
     "./components/ItemPicker.svelte": "./components/ItemPicker.svelte",
     "./components/JobArgs.svelte": "./components/JobArgs.svelte",
     "./components/JobStatus.svelte": "./components/JobStatus.svelte",
+    "./components/LightweightArgInput.svelte": "./components/LightweightArgInput.svelte",
+    "./components/LightweightSchemaForm.svelte": "./components/LightweightSchemaForm.svelte",
     "./components/LogViewer.svelte": "./components/LogViewer.svelte",
     "./components/Modal.svelte": "./components/Modal.svelte",
     "./components/ModulePreview.svelte": "./components/ModulePreview.svelte",
@@ -233,7 +237,6 @@
     "./components/apps/components/layout/AppTabs.svelte": "./components/apps/components/layout/AppTabs.svelte",
     "./components/apps/components/layout": "./components/apps/components/layout/index.js",
     "./components/apps/editor/AppComponentInput.svelte": "./components/apps/editor/AppComponentInput.svelte",
-    "./components/apps/editor/AppComponentInputs.svelte": "./components/apps/editor/AppComponentInputs.svelte",
     "./components/apps/editor/AppEditor.svelte": "./components/apps/editor/AppEditor.svelte",
     "./components/apps/editor/AppEditorHeader.svelte": "./components/apps/editor/AppEditorHeader.svelte",
     "./components/apps/editor/AppExportButton.svelte": "./components/apps/editor/AppExportButton.svelte",
@@ -242,6 +245,7 @@
     "./components/apps/editor/ComponentHeader.svelte": "./components/apps/editor/ComponentHeader.svelte",
     "./components/apps/editor/GridEditor.svelte": "./components/apps/editor/GridEditor.svelte",
     "./components/apps/editor/GridPanel.svelte": "./components/apps/editor/GridPanel.svelte",
+    "./components/apps/editor/GridViewer.svelte": "./components/apps/editor/GridViewer.svelte",
     "./components/apps/editor/RecomputeAllComponents.svelte": "./components/apps/editor/RecomputeAllComponents.svelte",
     "./components/apps/editor/SettingsPanel.svelte": "./components/apps/editor/SettingsPanel.svelte",
     "./components/apps/editor/SubGridEditor.svelte": "./components/apps/editor/SubGridEditor.svelte",
@@ -306,6 +310,10 @@
     "./components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte": "./components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte",
     "./components/apps/editor/settingsPanel/mainInput/WorkspaceFlowList.svelte": "./components/apps/editor/settingsPanel/mainInput/WorkspaceFlowList.svelte",
     "./components/apps/editor/settingsPanel/mainInput/WorkspaceScriptList.svelte": "./components/apps/editor/settingsPanel/mainInput/WorkspaceScriptList.svelte",
+    "./components/apps/editor/settingsPanel/triggerLists/BackgroundScriptTriggerList.svelte": "./components/apps/editor/settingsPanel/triggerLists/BackgroundScriptTriggerList.svelte",
+    "./components/apps/editor/settingsPanel/triggerLists/ComponentTriggerList.svelte": "./components/apps/editor/settingsPanel/triggerLists/ComponentTriggerList.svelte",
+    "./components/apps/editor/settingsPanel/triggerLists/TriggerBadgesList.svelte": "./components/apps/editor/settingsPanel/triggerLists/TriggerBadgesList.svelte",
+    "./components/apps/editor/settingsPanel/triggerLists/triggerListUtils": "./components/apps/editor/settingsPanel/triggerLists/triggerListUtils.js",
     "./components/apps/gridUtils": "./components/apps/gridUtils.js",
     "./components/apps/inputType": "./components/apps/inputType.js",
     "./components/apps/rx": "./components/apps/rx.js",
@@ -456,11 +464,7 @@
     "./components/graph/svelvet/editEdges/views/EditEdge.svelte": "./components/graph/svelvet/editEdges/views/EditEdge.svelte",
     "./components/graph/svelvet/nodes/controllers/util": "./components/graph/svelvet/nodes/controllers/util.js",
     "./components/graph/svelvet/nodes/models/Node": "./components/graph/svelvet/nodes/models/Node.js",
-    "./components/graph/svelvet/nodes/views/EditNode.svelte": "./components/graph/svelvet/nodes/views/EditNode.svelte",
     "./components/graph/svelvet/nodes/views/Node.svelte": "./components/graph/svelvet/nodes/views/Node.svelte",
-    "./components/graph/svelvet/resizableNodes/controllers/util": "./components/graph/svelvet/resizableNodes/controllers/util.js",
-    "./components/graph/svelvet/resizableNodes/models/ResizeNode": "./components/graph/svelvet/resizableNodes/models/ResizeNode.js",
-    "./components/graph/svelvet/resizableNodes/views/ResizeNode.svelte": "./components/graph/svelvet/resizableNodes/views/ResizeNode.svelte",
     "./components/graph/svelvet/store/controllers/storeApi": "./components/graph/svelvet/store/controllers/storeApi.js",
     "./components/graph/svelvet/store/controllers/userApi": "./components/graph/svelvet/store/controllers/userApi.js",
     "./components/graph/svelvet/store/controllers/util": "./components/graph/svelvet/store/controllers/util.js",

package/utils.d.ts

@@ -114,3 +114,5 @@ export declare function isCloudHosted(): boolean;
 export declare function isObject(obj: any): boolean;
 export declare function debounce(func: (...args: any[]) => any, wait: number): (...args: any[]) => void;
 export declare function throttle<T>(func: (...args: any[]) => T, wait: number): (...args: any[]) => void;
+export declare function isMac(): boolean;
+export declare function getModifierKey(): string;

package/utils.js

@@ -601,3 +601,9 @@ export function throttle(func, wait) {
         }
     };
 }
+export function isMac() {
+    return navigator.userAgent.indexOf('Mac OS X') !== -1;
+}
+export function getModifierKey() {
+    return isMac() ? '⌘' : 'CTRL';
+}

package/components/apps/editor/AppComponentInputs.svelte

@@ -1,13 +0,0 @@
-<script>import InputsSpecsEditor from './settingsPanel/InputsSpecsEditor.svelte';
-export let fields;
-export let component;
-export let resourceOnly = false;
-$: fields = resourceOnly ? fields : fields;
-</script>
-
-<InputsSpecsEditor
-	id={component.id}
-	shouldCapitalize={false}
-	bind:inputSpecs={fields}
-	userInputEnabled={component.type !== 'buttoncomponent'}
-/>