From 5667ba458b3b517c2945ac254e62dae7c2fad705 Mon Sep 17 00:00:00 2001
From: SorsOps <80043879+sorsOps@users.noreply.github.com>
Date: Wed, 15 Jan 2025 21:20:15 +0200
Subject: [PATCH 01/10] Change the createNode action to be async to account for
 any loaders or async action that might occur. Added compound nodes test

---
 .changeset/foo-bar.md                         |    5 +
 .changeset/light-avocados-hammer.md           |    5 +
 packages/graph-editor/package.json            |    3 +-
 .../src/components/commandPalette/index.tsx   |   33 +-
 .../contextMenus/selectionContextMenu.tsx     |    4 +-
 .../components/panels/dropPanel/DragItem.tsx  |    7 +-
 .../components/panels/dropPanel/NodeEntry.tsx |   37 +-
 .../panels/dropPanel/dropPanel.module.css     |   15 +
 .../components/panels/dropPanel/dropPanel.tsx |   27 +-
 .../src/components/panels/dropPanel/index.ts  |    1 +
 .../panels/dropPanel/nodeEntry.module.css     |   15 +
 .../src/components/toolbar/dropdowns/add.tsx  |    4 +-
 .../src/editor/actions/copyNodes.tsx          |    4 +-
 .../src/editor/actions/createNode.tsx         |   13 +-
 .../src/editor/actions/duplicate.ts           |    8 +-
 .../src/editor/actions/provider.tsx           |    5 +-
 .../graph-editor/src/editor/editorTypes.ts    |    2 +
 packages/graph-editor/src/editor/graph.tsx    |   35 +-
 packages/graph-editor/src/editor/index.tsx    |    5 +-
 .../graph-editor/src/editor/layout/data.tsx   |  166 +
 .../graph-editor/src/editor/layout/groups.tsx |   78 +
 .../graph-editor/src/editor/layout/utils.ts   |   45 +
 .../graph-editor/src/hooks/useOpenPanel.tsx   |    2 +-
 packages/graph-editor/src/index.tsx           |    1 -
 packages/graph-editor/src/redux/index.tsx     |    1 +
 .../graph-editor/src/redux/models/registry.ts |   23 +-
 .../src/redux/selectors/registry.ts           |    2 +-
 packages/graph-editor/vitest.config.ts        |   19 +
 packages/graph-engine/package.json            |    4 +
 packages/graph-engine/src/graph/graph.ts      |    6 +-
 packages/graph-engine/src/graph/types.ts      |    6 +-
 .../src/nodes/generic/subgraph.ts             |   12 +-
 .../graph-engine/src/programmatic/input.ts    |    2 +-
 .../graph-engine/src/programmatic/port.ts     |    2 +-
 .../graph-engine/tests/suites/basic.test.ts   |    9 +-
 .../tests/suites/graph/loader.test.ts         |   71 +
 .../tests/suites/nodeUsage.test.ts            |    4 +-
 .../src/ui/controls/index.tsx                 |   11 +-
 .../src/ui/controls/tokenArray.tsx            |   48 +
 .../src/ui/controls/tokenSet.tsx              |   13 +-
 packages/ui/package.json                      |    2 +-
 packages/ui/prisma/schema.prisma              |    1 +
 packages/ui/src/api/contracts/marketplace.ts  |   47 +-
 .../ui/src/api/controllers/marketplace.ts     |   89 +-
 packages/ui/src/components/editor/index.tsx   |   32 +-
 .../ui/src/components/editor/nodeTypes.tsx    |    6 +-
 .../src/components/editor/styles.module.css   |    5 +
 .../ui/src/components/editor/tabLoader.tsx    |   44 +
 packages/ui/src/components/editor/toolbar.tsx |    8 +-
 .../{editor => }/panels/aiSummary.tsx         |    0
 .../ui/src/components/panels/marketPlace.tsx  |   52 +
 .../{editor => }/panels/preview.tsx           |    0
 packages/ui/src/components/spinner/index.tsx  |    8 +
 .../src/components/spinner/styles.module.css  |   13 +
 packages/ui/src/data/compounds/index.tsx      |   41 +
 .../ui/src/data/compounds/smoothShadow.json   | 2801 +++++++++++++++++
 packages/ui/src/data/layout/default.json      |   84 +
 yarn.lock                                     |   88 +-
 58 files changed, 3827 insertions(+), 247 deletions(-)
 create mode 100644 .changeset/foo-bar.md
 create mode 100644 .changeset/light-avocados-hammer.md
 create mode 100644 packages/graph-editor/src/components/panels/dropPanel/nodeEntry.module.css
 create mode 100644 packages/graph-editor/src/editor/layout/data.tsx
 create mode 100644 packages/graph-editor/src/editor/layout/groups.tsx
 create mode 100644 packages/graph-editor/src/editor/layout/utils.ts
 create mode 100644 packages/graph-editor/vitest.config.ts
 create mode 100644 packages/graph-engine/tests/suites/graph/loader.test.ts
 create mode 100644 packages/nodes-design-tokens/src/ui/controls/tokenArray.tsx
 create mode 100644 packages/ui/src/components/editor/styles.module.css
 create mode 100644 packages/ui/src/components/editor/tabLoader.tsx
 rename packages/ui/src/components/{editor => }/panels/aiSummary.tsx (100%)
 create mode 100644 packages/ui/src/components/panels/marketPlace.tsx
 rename packages/ui/src/components/{editor => }/panels/preview.tsx (100%)
 create mode 100644 packages/ui/src/components/spinner/index.tsx
 create mode 100644 packages/ui/src/components/spinner/styles.module.css
 create mode 100644 packages/ui/src/data/compounds/index.tsx
 create mode 100644 packages/ui/src/data/compounds/smoothShadow.json
 create mode 100644 packages/ui/src/data/layout/default.json

diff --git a/.changeset/foo-bar.md b/.changeset/foo-bar.md
new file mode 100644
index 000000000..aac0e7355
--- /dev/null
+++ b/.changeset/foo-bar.md
@@ -0,0 +1,5 @@
+---
+"@tokens-studio/graph-editor": major
+---
+
+Editor now accepts a `nodeLoader` which handles loading nodes instead of a static lookup
diff --git a/.changeset/light-avocados-hammer.md b/.changeset/light-avocados-hammer.md
new file mode 100644
index 000000000..f7c33e073
--- /dev/null
+++ b/.changeset/light-avocados-hammer.md
@@ -0,0 +1,5 @@
+---
+"@tokens-studio/graph-engine": major
+---
+
+The engine now allows for async node loading during deserialization using a nodeLoader instead of a static lookup
diff --git a/packages/graph-editor/package.json b/packages/graph-editor/package.json
index 22fd7218f..61e9f893b 100644
--- a/packages/graph-editor/package.json
+++ b/packages/graph-editor/package.json
@@ -34,6 +34,7 @@
     "format": "npm run format:eslint && npm run format:prettier",
     "format:eslint": "eslint . --fix",
     "format:prettier": "prettier \"**/*.{tsx,ts,js,md,json}\" --write",
+    "test": "vitest run",
     "test:e2e": "cypress run",
     "test:e2e:manual": "cypress open",
     "lint": "npm run lint:prettier && npm run lint:eslint",
@@ -59,7 +60,6 @@
     "@tokens-studio/tokens": "^0.3.7",
     "@tokens-studio/types": "^0.5.1",
     "@tokens-studio/ui": "^1.0.13",
-    "@tokens-studio/tokens": "^0.3.7",
     "@xzdarcy/react-timeline-editor": "^0.1.9",
     "array-move": "^4.0.0",
     "clsx": "^2.1.1",
@@ -122,6 +122,7 @@
     "cypress": "^13.9.0",
     "cypress-react-selector": "^3.0.0",
     "glob": "^11.0.0",
+    "happy-dom": "^16.3.0",
     "postcss": "^8.4.47",
     "postcss-cli": "^11.0.0",
     "postcss-css-variables": "^0.19.0",
diff --git a/packages/graph-editor/src/components/commandPalette/index.tsx b/packages/graph-editor/src/components/commandPalette/index.tsx
index d44657282..fa629029d 100644
--- a/packages/graph-editor/src/components/commandPalette/index.tsx
+++ b/packages/graph-editor/src/components/commandPalette/index.tsx
@@ -13,18 +13,19 @@ import { observer } from 'mobx-react-lite';
 import { showNodesCmdPaletteSelector } from '@/redux/selectors/ui.js';
 import { useDispatch, useSelector } from 'react-redux';
 import { useSelectAddedNodes } from '@/hooks/useSelectAddedNodes.js';
-import React from 'react';
+import React, { useCallback } from 'react';
 import Search from '@tokens-studio/icons/Search.js';
 import styles from './index.module.css';
 
 export interface ICommandMenu {
   items: DropPanelStore;
-  handleSelectNewNodeType: (node: NodeRequest) =>
+  handleSelectNewNodeType: (node: NodeRequest) => Promise<
     | {
         graphNode: Node;
         flowNode: ReactFlowNode;
       }
-    | undefined;
+    | undefined
+  >;
 }
 
 const CommandItem = observer(
@@ -80,7 +81,10 @@ const CommandMenuGroup = observer(
   },
 );
 
-const CommandMenu = ({ items, handleSelectNewNodeType }: ICommandMenu) => {
+export const CommandMenu = ({
+  items,
+  handleSelectNewNodeType,
+}: ICommandMenu) => {
   const showNodesCmdPalette = useSelector(showNodesCmdPaletteSelector);
   const dispatch = useDispatch();
   const cursorPositionRef = React.useRef<{ x: number; y: number }>({
@@ -91,8 +95,8 @@ const CommandMenu = ({ items, handleSelectNewNodeType }: ICommandMenu) => {
   const reactflow = useReactFlow();
   const selectAddedNodes = useSelectAddedNodes();
 
-  const handleSelectItem = (item) => {
-    const newNode = handleSelectNewNodeType({
+  const handleSelectItem = async (item) => {
+    const newNode = await handleSelectNewNodeType({
       position: reactflow.screenToFlowPosition(cursorPositionRef.current),
       ...item,
     });
@@ -132,13 +136,16 @@ const CommandMenu = ({ items, handleSelectNewNodeType }: ICommandMenu) => {
   }, [dispatch.ui, showNodesCmdPalette]);
 
   // Close the menu when Escape key is pressed inside the input
-  const handleKeyDown = (e) => {
-    if (e.key === 'Escape') {
-      e.preventDefault();
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
 
-      dispatch.ui.setShowNodesCmdPalette(false);
-    }
-  };
+        dispatch.ui.setShowNodesCmdPalette(false);
+      }
+    },
+    [dispatch.ui],
+  );
 
   return (
     <Command.Dialog
@@ -216,5 +223,3 @@ function NodePreview({ title, description, docs }) {
     </Stack>
   );
 }
-
-export { CommandMenu };
diff --git a/packages/graph-editor/src/components/contextMenus/selectionContextMenu.tsx b/packages/graph-editor/src/components/contextMenus/selectionContextMenu.tsx
index ee764bfa9..a1a09569e 100644
--- a/packages/graph-editor/src/components/contextMenus/selectionContextMenu.tsx
+++ b/packages/graph-editor/src/components/contextMenus/selectionContextMenu.tsx
@@ -74,7 +74,7 @@ export const SelectionContextMenu = ({ id, nodes }: INodeContextMenuProps) => {
     });
   }, [nodes, reactFlowInstance, selectedNodeIds, store]);
 
-  const onCreateSubgraph = useCallback(() => {
+  const onCreateSubgraph = useCallback(async () => {
     //We need to work out which nodes do not have parents in the selection
 
     const lookup = new Set(selectedNodeIds);
@@ -96,7 +96,7 @@ export const SelectionContextMenu = ({ id, nodes }: INodeContextMenuProps) => {
       y: position.y / selectedNodes.length,
     };
 
-    const nodes = createNode({
+    const nodes = await createNode({
       type: 'studio.tokens.generic.subgraph',
       position: finalPosition,
     });
diff --git a/packages/graph-editor/src/components/panels/dropPanel/DragItem.tsx b/packages/graph-editor/src/components/panels/dropPanel/DragItem.tsx
index e77c5896c..f61f31ae3 100644
--- a/packages/graph-editor/src/components/panels/dropPanel/DragItem.tsx
+++ b/packages/graph-editor/src/components/panels/dropPanel/DragItem.tsx
@@ -1,4 +1,5 @@
 import { GrabberIcon } from '@/components/icons/GrabberIcon.js';
+import { NodeEntry } from './NodeEntry.js';
 import { NodeHoverCard } from '@/components/NodeHoverCard.js';
 import React, { useCallback } from 'react';
 import styles from './DragItem.module.css';
@@ -6,8 +7,7 @@ import styles from './DragItem.module.css';
 type DragItemProps = {
   data?: unknown;
   type: string;
-  children: React.ReactNode;
-  title?: string;
+  title: string;
   description?: string;
   docs?: string;
   icon?: React.ReactNode | string;
@@ -20,7 +20,6 @@ export const DragItem = ({
   description,
   icon,
   docs,
-  children,
   ...rest
 }: DragItemProps) => {
   const [isDragging, setIsDragging] = React.useState(false);
@@ -62,7 +61,7 @@ export const DragItem = ({
           <span className={styles.grabber}>
             <GrabberIcon />
           </span>
-          {children}
+          <NodeEntry icon={icon} text={title} />
         </button>
       </NodeHoverCard>
     </div>
diff --git a/packages/graph-editor/src/components/panels/dropPanel/NodeEntry.tsx b/packages/graph-editor/src/components/panels/dropPanel/NodeEntry.tsx
index 23118af8e..cbfdc0f5e 100644
--- a/packages/graph-editor/src/components/panels/dropPanel/NodeEntry.tsx
+++ b/packages/graph-editor/src/components/panels/dropPanel/NodeEntry.tsx
@@ -1,39 +1,18 @@
-import { Text } from '@tokens-studio/ui';
+import { Text } from '@tokens-studio/ui/Text.js';
 import React from 'react';
+import styles from './nodeEntry.module.css';
 
-export const NodeEntry = ({
-  icon,
-  text,
-}: {
+export interface INodeEntry {
   icon?: React.ReactNode | string;
   text: string;
-}) => {
+}
+
+export const NodeEntry = ({ icon, text }: INodeEntry) => {
   return (
     <>
-      {icon && (
-        <div
-          style={{
-            color: 'var(--color-neutral-canvas-default-fg-subtle)',
-            width: 'var(--size-100)',
-            height: 'var(--size-100)',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            font: 'var(--font-body-sm)',
-          }}
-        >
-          {icon}
-        </div>
-      )}
+      {icon && <div className={styles.icon}>{icon}</div>}
 
-      <Text
-        size="xsmall"
-        style={{
-          whiteSpace: 'nowrap',
-          textOverflow: 'ellipsis',
-          overflow: 'hidden',
-        }}
-      >
+      <Text size="xsmall" className={styles.title}>
         {text}
       </Text>
     </>
diff --git a/packages/graph-editor/src/components/panels/dropPanel/dropPanel.module.css b/packages/graph-editor/src/components/panels/dropPanel/dropPanel.module.css
index 0adbdf244..f6574c606 100644
--- a/packages/graph-editor/src/components/panels/dropPanel/dropPanel.module.css
+++ b/packages/graph-editor/src/components/panels/dropPanel/dropPanel.module.css
@@ -7,6 +7,19 @@
   flex-direction: column;
 }
 
+.vertical {
+  padding-top: var(--component-spacing-xs);
+  width: 100%;
+  flex: 1;
+  overflow: auto;
+  box-sizing: border-box;
+}
+
+.search {
+  padding: 0 var(--component-spacing-md);
+  padding-top: var(--component-spacing-lg)
+}
+
 .accordion {
   width: 100%;
   display: flex;
@@ -17,10 +30,12 @@
     border: 0;
   }
 }
+
 .accordionItem {
   border: 0;
 
 }
+
 .accordionTrigger {
   display: flex;
   align-items: center;
diff --git a/packages/graph-editor/src/components/panels/dropPanel/dropPanel.tsx b/packages/graph-editor/src/components/panels/dropPanel/dropPanel.tsx
index 3377567e0..f47d36f07 100644
--- a/packages/graph-editor/src/components/panels/dropPanel/dropPanel.tsx
+++ b/packages/graph-editor/src/components/panels/dropPanel/dropPanel.tsx
@@ -1,7 +1,6 @@
 import { Accordion, Stack, TextInput } from '@tokens-studio/ui';
 import { DragItem } from './DragItem.js';
 import { DropPanelStore } from './data.js';
-import { NodeEntry } from './NodeEntry.js';
 import { observer } from 'mobx-react-lite';
 import { panelItemsSelector } from '@/redux/selectors/registry.js';
 import { useSelector } from 'react-redux';
@@ -43,25 +42,8 @@ export const DropPanelInner = observer(({ data }: IDropPanel) => {
 
   return (
     <div className={styles.container} id="drop-panel">
-      <Stack
-        direction="column"
-        gap={3}
-        style={{
-          paddingTop: 'var(--component-spacing-xs)',
-          width: '100%',
-          flex: 1,
-          overflow: 'auto',
-          boxSizing: 'border-box',
-        }}
-      >
-        <Stack
-          direction="column"
-          gap={2}
-          style={{
-            padding: '0 var(--component-spacing-md)',
-            paddingTop: 'var(--component-spacing-lg)',
-          }}
-        >
+      <Stack direction="column" gap={3} className={styles.vertical}>
+        <Stack direction="column" gap={2} className={styles.search}>
           <TextInput placeholder="Search…" value={search} onChange={onSearch} />
         </Stack>
         <Accordion type="multiple" value={opened} onValueChange={setOpened}>
@@ -73,14 +55,13 @@ export const DropPanelInner = observer(({ data }: IDropPanel) => {
               .map((item) => (
                 <DragItem
                   type={item.type}
+                  icon={item.icon}
                   data={item.data || null}
                   key={item.text}
                   docs={item.docs}
                   description={item.description}
                   title={item.text}
-                >
-                  <NodeEntry icon={item.icon} text={item.text} />
-                </DragItem>
+                />
               ));
 
             if (filteredValues.length === 0) {
diff --git a/packages/graph-editor/src/components/panels/dropPanel/index.ts b/packages/graph-editor/src/components/panels/dropPanel/index.ts
index c0c286a75..14952d6c2 100644
--- a/packages/graph-editor/src/components/panels/dropPanel/index.ts
+++ b/packages/graph-editor/src/components/panels/dropPanel/index.ts
@@ -1,2 +1,3 @@
 export * from './dropPanel.js';
 export * from './data.js';
+export * from './DragItem.js';
diff --git a/packages/graph-editor/src/components/panels/dropPanel/nodeEntry.module.css b/packages/graph-editor/src/components/panels/dropPanel/nodeEntry.module.css
new file mode 100644
index 000000000..1a0742e93
--- /dev/null
+++ b/packages/graph-editor/src/components/panels/dropPanel/nodeEntry.module.css
@@ -0,0 +1,15 @@
+.icon {
+  color: var(--color-neutral-canvas-default-fg-subtle);
+  width: var(--size-100);
+  height: var(--size-100);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font: var(--font-body-sm);
+}
+
+.title {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
\ No newline at end of file
diff --git a/packages/graph-editor/src/components/toolbar/dropdowns/add.tsx b/packages/graph-editor/src/components/toolbar/dropdowns/add.tsx
index 8fb9b1ac9..c71c792c6 100644
--- a/packages/graph-editor/src/components/toolbar/dropdowns/add.tsx
+++ b/packages/graph-editor/src/components/toolbar/dropdowns/add.tsx
@@ -37,7 +37,7 @@ export const AddDropdown = () => {
   }, [dispatch.ui]);
 
   const addNode = useCallback(
-    (type: string) => {
+    async (type: string) => {
       const newNode = {
         type,
         position: reactFlowInstance.screenToFlowPosition(
@@ -45,7 +45,7 @@ export const AddDropdown = () => {
         ),
       };
 
-      const node = createNode(newNode);
+      const node = await createNode(newNode);
 
       if (node) {
         selectAddedNodes([node.flowNode]);
diff --git a/packages/graph-editor/src/editor/actions/copyNodes.tsx b/packages/graph-editor/src/editor/actions/copyNodes.tsx
index f8bbdc220..bd0a04ea4 100644
--- a/packages/graph-editor/src/editor/actions/copyNodes.tsx
+++ b/packages/graph-editor/src/editor/actions/copyNodes.tsx
@@ -5,7 +5,7 @@ import { v4 as uuidv4 } from 'uuid';
 export const copyNodeAction = (
   reactFlowInstance: ReactFlowInstance,
   graph,
-  nodeLookup,
+  nodeLoader,
 ) => {
   return async (nodes: SerializedNode[]) => {
     const { addNodes } = await nodes.reduce(
@@ -19,7 +19,7 @@ export const copyNodeAction = (
               ...node.engine,
               id: newID,
             },
-            nodeLookup,
+            nodeLoader,
           );
 
           graph.addNode(newGraphNode);
diff --git a/packages/graph-editor/src/editor/actions/createNode.tsx b/packages/graph-editor/src/editor/actions/createNode.tsx
index e3d762220..1ab5cb285 100644
--- a/packages/graph-editor/src/editor/actions/createNode.tsx
+++ b/packages/graph-editor/src/editor/actions/createNode.tsx
@@ -1,5 +1,5 @@
 import { Dispatch } from '@/redux/store.js';
-import { Graph, Node, NodeFactory } from '@tokens-studio/graph-engine';
+import { Graph, Node, NodeLoader } from '@tokens-studio/graph-engine';
 import { ReactFlowInstance, Node as ReactFlowNode } from 'reactflow';
 
 export type NodeRequest = {
@@ -11,7 +11,7 @@ export type NodeRequest = {
 export interface ICreateNode {
   reactFlowInstance: ReactFlowInstance;
   graph: Graph;
-  nodeLookup: Record<string, NodeFactory>;
+  nodeLoader: NodeLoader;
   iconLookup: Record<string, string>;
   /**
    * If a customized node would be created in the editor, it would be created using this UI lookup.
@@ -25,13 +25,13 @@ export interface ICreateNode {
 export const createNode = ({
   reactFlowInstance,
   graph,
-  nodeLookup,
+  nodeLoader,
   iconLookup,
   customUI,
   dropPanelPosition,
   dispatch,
 }: ICreateNode) => {
-  return (nodeRequest: NodeRequest) => {
+  return async (nodeRequest: NodeRequest) => {
     const position = nodeRequest.position || {
       x: dropPanelPosition.x,
       y: dropPanelPosition.y,
@@ -59,12 +59,13 @@ export const createNode = ({
     }
 
     //Lookup the node type
-    const Factory = nodeLookup[nodeRequest.type];
+    const Factory = await nodeLoader(nodeRequest.type);
 
     //Generate the new node
-    const node = new Factory({
+    const node = await new Factory({
       graph: graph,
     });
+
     graph.addNode(node);
 
     const finalPos = position || { x: 0, y: 0 };
diff --git a/packages/graph-editor/src/editor/actions/duplicate.ts b/packages/graph-editor/src/editor/actions/duplicate.ts
index 6e19a0163..a1a4669d3 100644
--- a/packages/graph-editor/src/editor/actions/duplicate.ts
+++ b/packages/graph-editor/src/editor/actions/duplicate.ts
@@ -1,16 +1,10 @@
 import { Edge, Node, ReactFlowInstance } from 'reactflow';
-import {
-  Graph,
-  NodeFactory,
-  Port,
-  annotatedSingleton,
-} from '@tokens-studio/graph-engine';
+import { Graph, Port, annotatedSingleton } from '@tokens-studio/graph-engine';
 import { v4 as uuidv4 } from 'uuid';
 
 export interface IDuplicate {
   reactFlowInstance: ReactFlowInstance;
   graph: Graph;
-  nodeLookup: Record<string, NodeFactory>;
 }
 
 /**
diff --git a/packages/graph-editor/src/editor/actions/provider.tsx b/packages/graph-editor/src/editor/actions/provider.tsx
index de86a28b9..d145bf9d4 100644
--- a/packages/graph-editor/src/editor/actions/provider.tsx
+++ b/packages/graph-editor/src/editor/actions/provider.tsx
@@ -5,12 +5,13 @@ import React from 'react';
 import type { NodeRequest } from './createNode.js';
 
 export type Actions = {
-  createNode: (nodeRequest: NodeRequest) =>
+  createNode: (nodeRequest: NodeRequest) => Promise<
     | undefined
     | {
         graphNode: Node;
         flowNode: FlowNode;
-      };
+      }
+  >;
   deleteNode: (nodeId: string) => void;
   copyNodes: (nodes: SerializedNode[]) => void;
   duplicateNodes: (nodeIds: string[]) => void;
diff --git a/packages/graph-editor/src/editor/editorTypes.ts b/packages/graph-editor/src/editor/editorTypes.ts
index c613b6ae3..e1aede73e 100644
--- a/packages/graph-editor/src/editor/editorTypes.ts
+++ b/packages/graph-editor/src/editor/editorTypes.ts
@@ -3,6 +3,7 @@ import {
   ExternalLoader,
   Graph,
   Node as GraphNode,
+  NodeLoader,
   SchemaObject,
   SerializedGraph,
 } from '@tokens-studio/graph-engine';
@@ -15,6 +16,7 @@ import type { LayoutBase, TabBase, TabData } from 'rc-dock';
 export interface EditorProps {
   id?: string;
 
+  nodeLoader?: NodeLoader;
   tabLoader?: (tab: TabBase) => TabData | undefined;
 
   /**
diff --git a/packages/graph-editor/src/editor/graph.tsx b/packages/graph-editor/src/editor/graph.tsx
index 000dc8cdc..3e17a7652 100644
--- a/packages/graph-editor/src/editor/graph.tsx
+++ b/packages/graph-editor/src/editor/graph.tsx
@@ -57,7 +57,7 @@ import { PassthroughNode } from '@/components/flow/nodes/passthroughNode.js';
 import { SelectionContextMenu } from '@/components/contextMenus/selectionContextMenu.js';
 import {
   capabilitiesSelector,
-  nodeTypesSelector,
+  nodeLoaderSelector,
   panelItemsSelector,
 } from '@/redux/selectors/registry.js';
 import { clear } from './actions/clear.js';
@@ -113,7 +113,7 @@ export const EditorApp = React.forwardRef<
   GraphEditorProps
 >((props: GraphEditorProps, ref) => {
   const panelItems = useSelector(panelItemsSelector);
-  const fullNodeLookup = useSelector(nodeTypesSelector);
+  const nodeLoader = useSelector(nodeLoaderSelector);
   const { id, customNodeUI = {}, children } = props;
 
   const externalLoader = useExternalLoader();
@@ -397,7 +397,7 @@ export const EditorApp = React.forwardRef<
       createNode({
         reactFlowInstance,
         graph,
-        nodeLookup: fullNodeLookup,
+        nodeLoader,
         iconLookup,
         customUI: customNodeMap,
         dropPanelPosition,
@@ -406,7 +406,7 @@ export const EditorApp = React.forwardRef<
     [
       reactFlowInstance,
       graph,
-      fullNodeLookup,
+      nodeLoader,
       iconLookup,
       customNodeMap,
       dropPanelPosition,
@@ -429,7 +429,7 @@ export const EditorApp = React.forwardRef<
       },
       loadRaw: async (serializedGraph) => {
         if (internalRef.current) {
-          await graph.deserialize(serializedGraph, fullNodeLookup);
+          await graph.deserialize(serializedGraph, nodeLoader);
           internalRef?.current.load(graph);
         }
       },
@@ -510,7 +510,7 @@ export const EditorApp = React.forwardRef<
     [
       reactFlowInstance,
       graph,
-      fullNodeLookup,
+      nodeLoader,
       setNodes,
       setEdges,
       dispatch.graph,
@@ -589,15 +589,16 @@ export const EditorApp = React.forwardRef<
   );
 
   const onEdgeDblClick = useCallback(
-    (event, clickedEdge) => {
+    async (event, clickedEdge) => {
       event.stopPropagation();
 
       const position = reactFlowInstance?.screenToFlowPosition({
         x: event.clientX,
         y: event.clientY,
       });
+      const PassthroughFactory = await nodeLoader(PASSTHROUGH);
 
-      const newNode = new fullNodeLookup[PASSTHROUGH]({
+      const newNode = new PassthroughFactory({
         graph,
       });
 
@@ -657,7 +658,7 @@ export const EditorApp = React.forwardRef<
         return [...filtered, newEdge, newEdge2];
       });
     },
-    [fullNodeLookup, graph, reactFlowInstance, setEdges, setNodes],
+    [nodeLoader, graph, reactFlowInstance, setEdges, setNodes],
   );
 
   const onNodeDrag = useCallback(
@@ -698,10 +699,9 @@ export const EditorApp = React.forwardRef<
   const duplicateNodesAction = duplicateNodes({
     graph,
     reactFlowInstance,
-    nodeLookup: fullNodeLookup,
   });
 
-  const copyNodes = copyNodeAction(reactFlowInstance, graph, fullNodeLookup);
+  const copyNodes = copyNodeAction(reactFlowInstance, graph, nodeLoader);
   const selectAddedNodes = useSelectAddedNodes();
 
   const onDrop = useCallback(
@@ -721,12 +721,15 @@ export const EditorApp = React.forwardRef<
       });
 
       //Some of the nodes might be invalid, so remember to filter them out
-      const newNodes = positionUpdated
-        .map((nodeRequest) => handleSelectNewNodeType(nodeRequest))
-        .filter((x) => !!x)
-        .map((x) => x?.flowNode ?? ({} as Node));
+      const newNodes = await Promise.all(
+        positionUpdated.map((nodeRequest) =>
+          handleSelectNewNodeType(nodeRequest),
+        ),
+      );
 
-      selectAddedNodes(newNodes);
+      selectAddedNodes(
+        newNodes.filter((x) => !!x).map((x) => x?.flowNode ?? ({} as Node)),
+      );
     },
     [handleSelectNewNodeType, reactFlowInstance],
   );
diff --git a/packages/graph-editor/src/editor/index.tsx b/packages/graph-editor/src/editor/index.tsx
index 13275df10..80d621908 100644
--- a/packages/graph-editor/src/editor/index.tsx
+++ b/packages/graph-editor/src/editor/index.tsx
@@ -3,7 +3,6 @@ import { LayoutController } from './layoutController.js';
 import { ReduxProvider } from '../redux/index.js';
 import { ToastProvider } from '@/hooks/useToast.js';
 import { defaultControls } from '@/registry/control.js';
-import { nodeLookup as defaultNodeLookup } from '@tokens-studio/graph-engine';
 import { defaultPanelGroupsFactory } from '@/components/index.js';
 import { defaultSpecifics } from '@/registry/specifics.js';
 import React from 'react';
@@ -20,7 +19,7 @@ export const Editor = React.forwardRef<ImperativeEditorRef, EditorProps>(
 
       toolbarButtons,
       schemas,
-      nodeTypes = defaultNodeLookup,
+      nodeLoader,
       controls = [...defaultControls],
       specifics = defaultSpecifics,
       icons,
@@ -34,7 +33,7 @@ export const Editor = React.forwardRef<ImperativeEditorRef, EditorProps>(
           schemas={schemas}
           controls={controls}
           panelItems={panelItems}
-          nodeTypes={nodeTypes}
+          nodeTypes={nodeLoader}
           specifics={specifics}
           capabilities={capabilities}
           toolbarButtons={toolbarButtons}
diff --git a/packages/graph-editor/src/editor/layout/data.tsx b/packages/graph-editor/src/editor/layout/data.tsx
new file mode 100644
index 000000000..4f9d972fd
--- /dev/null
+++ b/packages/graph-editor/src/editor/layout/data.tsx
@@ -0,0 +1,166 @@
+import { DropPanel } from '@/components/panels/dropPanel/dropPanel.js';
+import { ErrorBoundary } from 'react-error-boundary';
+import { ErrorBoundaryContent } from '@/components/ErrorBoundaryContent.js';
+import { GraphEditor } from '../graphEditor.js';
+import { Inputsheet } from '@/components/panels/inputs/index.js';
+import { LayoutData, TabBase, TabData } from 'rc-dock';
+import { MAIN_GRAPH_ID } from '@/constants.js';
+import { OutputSheet } from '@/components/panels/output/index.js';
+import React from 'react';
+
+export const layoutDataFactory = (): LayoutData => {
+  return {
+    dockbox: {
+      mode: 'vertical',
+      children: [
+        {
+          mode: 'horizontal',
+          children: [
+            {
+              size: 2,
+              mode: 'vertical',
+              children: [
+                {
+                  mode: 'horizontal',
+                  children: [
+                    {
+                      size: 3,
+                      mode: 'vertical',
+                      children: [
+                        {
+                          tabs: [
+                            {
+                              id: 'dropPanel',
+                              title: '',
+                              content: <></>,
+                            },
+                            {
+                              id: 'previewNodesPanel',
+                              title: '',
+                              content: <></>,
+                            },
+                          ],
+                        },
+                      ],
+                    },
+                    {
+                      size: 17,
+                      mode: 'vertical',
+                      children: [
+                        {
+                          id: 'graphs',
+                          size: 700,
+                          group: 'graph',
+                          panelLock: { panelStyle: 'graph' },
+                          tabs: [
+                            {
+                              closable: true,
+                              cached: true,
+                              id: MAIN_GRAPH_ID,
+                              group: 'graph',
+                              title: 'Graph',
+                              content: <></>,
+                            },
+                          ],
+                        },
+                      ],
+                    },
+
+                    {
+                      size: 4,
+                      mode: 'vertical',
+                      children: [
+                        {
+                          size: 12,
+                          tabs: [
+                            {
+                              id: 'input',
+                              title: '',
+                              content: <></>,
+                            },
+                          ],
+                        },
+                        {
+                          size: 12,
+                          tabs: [
+                            {
+                              id: 'outputs',
+                              title: '',
+                              content: <></>,
+                            },
+                          ],
+                        },
+                      ],
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  };
+};
+
+export const layoutLoader =
+  (props, ref) =>
+  (tab: TabBase): TabData => {
+    const { id } = tab;
+    switch (id) {
+      case MAIN_GRAPH_ID:
+        return {
+          closable: true,
+          cached: true,
+          id: MAIN_GRAPH_ID,
+          group: 'graph',
+          title: 'Graph',
+          content: (
+            <ErrorBoundary fallback={<ErrorBoundaryContent />}>
+              <GraphEditor {...props} id={MAIN_GRAPH_ID} ref={ref} />
+            </ErrorBoundary>
+          ),
+        };
+      case 'input':
+        return {
+          closable: true,
+          cached: true,
+          group: 'popout',
+          id: 'input',
+          title: 'Inputs',
+          content: (
+            <ErrorBoundary fallback={<ErrorBoundaryContent />}>
+              <Inputsheet />
+            </ErrorBoundary>
+          ),
+        };
+      case 'outputs':
+        return {
+          closable: true,
+          cached: true,
+          group: 'popout',
+          id: 'outputs',
+          title: 'Outputs',
+          content: (
+            <ErrorBoundary fallback={<ErrorBoundaryContent />}>
+              <OutputSheet />
+            </ErrorBoundary>
+          ),
+        };
+
+      case 'dropPanel':
+        return {
+          group: 'popout',
+          id: 'dropPanel',
+          title: 'Nodes',
+          content: (
+            <ErrorBoundary fallback={<ErrorBoundaryContent />}>
+              <DropPanel />
+            </ErrorBoundary>
+          ),
+          closable: true,
+        };
+      default:
+        return tab as TabData;
+    }
+  };
diff --git a/packages/graph-editor/src/editor/layout/groups.tsx b/packages/graph-editor/src/editor/layout/groups.tsx
new file mode 100644
index 000000000..378d6dee2
--- /dev/null
+++ b/packages/graph-editor/src/editor/layout/groups.tsx
@@ -0,0 +1,78 @@
+import { IconButton } from '@tokens-studio/ui/IconButton.js';
+import { Stack } from '@tokens-studio/ui/Stack.js';
+import { TabGroup } from 'rc-dock';
+import ArrowUpRight from '@tokens-studio/icons/ArrowUpRight.js';
+import Maximize from '@tokens-studio/icons/Maximize.js';
+import React from 'react';
+import Reduce from '@tokens-studio/icons/Reduce.js';
+import Xmark from '@tokens-studio/icons/Xmark.js';
+
+const DockButton = (rest) => {
+  return <IconButton size="small" emphasis="low" {...rest} />;
+};
+
+export const groups: Record<string, TabGroup> = {
+  popout: {
+    animated: true,
+    floatable: true,
+
+    panelExtra: (panelData, context) => {
+      const buttons: React.ReactElement[] = [];
+      if (panelData?.parent?.mode !== 'window') {
+        const maxxed = panelData?.parent?.mode === 'maximize';
+        buttons.push(
+          <DockButton
+            key="maximize"
+            title={
+              panelData?.parent?.mode === 'maximize' ? 'Restore' : 'Maximize'
+            }
+            icon={maxxed ? <Reduce /> : <Maximize />}
+            onClick={() => context.dockMove(panelData, null, 'maximize')}
+          ></DockButton>,
+        );
+        buttons.push(
+          <DockButton
+            key="new-window"
+            title="Open in new window"
+            icon={<ArrowUpRight />}
+            onClick={() => context.dockMove(panelData, null, 'new-window')}
+          ></DockButton>,
+        );
+      }
+      buttons.push(
+        <DockButton
+          key="close"
+          title="Close"
+          icon={<Xmark />}
+          onClick={() => context.dockMove(panelData, null, 'remove')}
+        ></DockButton>,
+      );
+      return <Stack>{buttons}</Stack>;
+    },
+  },
+  /**
+   * Note that the graph has a huge issue when ran in a popout window, as such we disable it for now
+   */
+  graph: {
+    animated: true,
+    floatable: true,
+    panelExtra: (panelData, context) => {
+      const buttons: React.ReactElement[] = [];
+      if (panelData?.parent?.mode !== 'window') {
+        const maxxed = panelData?.parent?.mode === 'maximize';
+        buttons.push(
+          <DockButton
+            key="maximize"
+            title={
+              panelData?.parent?.mode === 'maximize' ? 'Restore' : 'Maximize'
+            }
+            icon={maxxed ? <Reduce /> : <Maximize />}
+            onClick={() => context.dockMove(panelData, null, 'maximize')}
+          ></DockButton>,
+        );
+      }
+
+      return <Stack>{buttons}</Stack>;
+    },
+  },
+};
diff --git a/packages/graph-editor/src/editor/layout/utils.ts b/packages/graph-editor/src/editor/layout/utils.ts
new file mode 100644
index 000000000..0ac3069cf
--- /dev/null
+++ b/packages/graph-editor/src/editor/layout/utils.ts
@@ -0,0 +1,45 @@
+import { BoxBase, LayoutBase, PanelBase } from 'rc-dock';
+
+export function recurseFindGraphPanel(
+  base: BoxBase | PanelBase,
+): PanelBase | null {
+  if (base.id === 'graphs') {
+    return base as PanelBase;
+  }
+  //Check if it has children
+  if ((base as BoxBase).children) {
+    for (const child of (base as BoxBase).children) {
+      const found = recurseFindGraphPanel(child);
+      if (found) {
+        return found;
+      }
+    }
+  }
+  return null;
+}
+
+export function findGraphPanel(layout: LayoutBase): PanelBase | null {
+  //We need to recursively search for the graph panel
+  // It is most likely in the dockbox
+  const dockbox = recurseFindGraphPanel(layout.dockbox);
+  if (dockbox) {
+    return dockbox;
+  }
+  if (layout.floatbox) {
+    const floatBox = recurseFindGraphPanel(layout.floatbox);
+    if (floatBox) {
+      return floatBox;
+    }
+  } else if (layout.maxbox) {
+    const tab = recurseFindGraphPanel(layout.maxbox);
+    if (tab) {
+      return tab;
+    }
+  } else if (layout.windowbox) {
+    const tab = recurseFindGraphPanel(layout.windowbox);
+    if (tab) {
+      return tab;
+    }
+  }
+  return null;
+}
diff --git a/packages/graph-editor/src/hooks/useOpenPanel.tsx b/packages/graph-editor/src/hooks/useOpenPanel.tsx
index d1a9b3d53..06f6b4201 100644
--- a/packages/graph-editor/src/hooks/useOpenPanel.tsx
+++ b/packages/graph-editor/src/hooks/useOpenPanel.tsx
@@ -5,7 +5,7 @@ import React, { MutableRefObject, useCallback } from 'react';
 import type { DockLayout } from 'rc-dock';
 
 export type PanelFactory = {
-  group: string;
+  group: string | undefined;
   id: string;
   title: React.ReactElement | string;
   content: React.ReactElement;
diff --git a/packages/graph-editor/src/index.tsx b/packages/graph-editor/src/index.tsx
index b508c6315..1207401ef 100644
--- a/packages/graph-editor/src/index.tsx
+++ b/packages/graph-editor/src/index.tsx
@@ -19,4 +19,3 @@ export * from './registry/control.js';
 export * from './registry/specifics.js';
 export * from './registry/toolbar.js';
 export * from './types/index.js';
-export { DropPanelStore } from './components/panels/dropPanel/data.js';
diff --git a/packages/graph-editor/src/redux/index.tsx b/packages/graph-editor/src/redux/index.tsx
index 8a824681e..fe0d0742e 100644
--- a/packages/graph-editor/src/redux/index.tsx
+++ b/packages/graph-editor/src/redux/index.tsx
@@ -34,6 +34,7 @@ export const ReduxProvider = ({
   }, [controls]);
 
   useEffect(() => {
+    console.log(nodeTypes);
     store.dispatch.registry.setNodeTypes(nodeTypes);
   }, [nodeTypes]);
 
diff --git a/packages/graph-editor/src/redux/models/registry.ts b/packages/graph-editor/src/redux/models/registry.ts
index 742830230..c2b0ed442 100644
--- a/packages/graph-editor/src/redux/models/registry.ts
+++ b/packages/graph-editor/src/redux/models/registry.ts
@@ -2,6 +2,7 @@ import {
   AllSchemas,
   CapabilityFactory,
   Node,
+  NodeLoader,
   SchemaObject,
 } from '@tokens-studio/graph-engine';
 import { Control } from '@/types/controls.js';
@@ -24,7 +25,7 @@ export interface RegistryState {
   icons: Record<string, React.ReactNode>;
   inputControls: Record<string, React.FC<{ node: Node }>>;
   controls: Control[];
-  nodeTypes: Record<string, typeof Node>;
+  nodeTypes: NodeLoader;
   panelItems: DropPanelStore;
   capabilities: CapabilityFactory[];
   toolbarButtons: ReactElement[];
@@ -38,7 +39,9 @@ export const registryState = createModel<RootModel>()({
     inputControls: { ...inputControls },
     controls: [...(defaultControls as Control[])],
     panelItems: defaultPanelGroupsFactory(),
-    nodeTypes: {},
+    nodeTypes: async () => {
+      throw new Error('Node type not found');
+    },
     capabilities: [],
     toolbarButtons: DefaultToolbarButtons(),
     schemas: AllSchemas,
@@ -56,31 +59,31 @@ export const registryState = createModel<RootModel>()({
         toolbarButtons,
       };
     },
-    setCapabilities(state, payload: CapabilityFactory[]) {
+    setCapabilities(state, capabilities: CapabilityFactory[]) {
       return {
         ...state,
-        capabilities: payload,
+        capabilities,
       };
     },
-    setNodeTypes: (state, payload: Record<string, typeof Node>) => {
+    setNodeTypes: (state, nodeTypes: NodeLoader) => {
       return {
         ...state,
-        nodeTypes: payload,
+        nodeTypes,
       };
     },
     setSpecifics: (
       state,
-      payload: Record<string, React.FC<{ node: Node }>>,
+      nodeSpecifics: Record<string, React.FC<{ node: Node }>>,
     ) => {
       return {
         ...state,
-        nodeSpecifics: payload,
+        nodeSpecifics,
       };
     },
-    setControls(state, payload: Control[]) {
+    setControls(state, controls: Control[]) {
       return {
         ...state,
-        controls: payload,
+        controls,
       };
     },
     registerIcons(state, payload: Record<string, React.ReactNode>) {
diff --git a/packages/graph-editor/src/redux/selectors/registry.ts b/packages/graph-editor/src/redux/selectors/registry.ts
index ed9e71f27..478de24d5 100644
--- a/packages/graph-editor/src/redux/selectors/registry.ts
+++ b/packages/graph-editor/src/redux/selectors/registry.ts
@@ -23,7 +23,7 @@ export const capabilitiesSelector = createSelector(
   (state) => state.capabilities,
 );
 
-export const nodeTypesSelector = createSelector(
+export const nodeLoaderSelector = createSelector(
   registry,
   (state) => state.nodeTypes,
 );
diff --git a/packages/graph-editor/vitest.config.ts b/packages/graph-editor/vitest.config.ts
new file mode 100644
index 000000000..80e559d59
--- /dev/null
+++ b/packages/graph-editor/vitest.config.ts
@@ -0,0 +1,19 @@
+/// <reference types="vitest" />
+import { defineConfig } from 'vitest/config';
+import tsconfigPaths from 'vite-tsconfig-paths';
+
+export default defineConfig({
+  // Note that this needs to be present here as well as it doesn't get picked up from the root vite.config.ts
+  plugins: [tsconfigPaths()],
+  test: {
+    include: ['tests/**/*.test.[jt]s?(x)', 'src/**/*.test.[jt]s?(x)'],
+    environment: 'happy-dom',
+    globals: true,
+    server: {
+      deps: {
+        // to ensure importing CSS files is working
+        inline: ['@tokens-studio/ui'],
+      },
+    },
+  },
+});
diff --git a/packages/graph-engine/package.json b/packages/graph-engine/package.json
index 9a2e3b068..0c60157c2 100644
--- a/packages/graph-engine/package.json
+++ b/packages/graph-engine/package.json
@@ -9,6 +9,10 @@
     ".": {
       "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
+    },
+    "./nodes/*": {
+      "import": "./dist/nodes/*",
+      "types": "./dist/nodes/*"
     }
   },
   "repository": {
diff --git a/packages/graph-engine/src/graph/graph.ts b/packages/graph-engine/src/graph/graph.ts
index e23cc0273..29581be36 100644
--- a/packages/graph-engine/src/graph/graph.ts
+++ b/packages/graph-engine/src/graph/graph.ts
@@ -17,7 +17,7 @@ import { makeObservable, observable, toJS } from 'mobx';
 import { topologicalSort } from './topologicSort.js';
 import { v4 as uuid } from 'uuid';
 import type { ExternalLoader, NodeRun, NodeStart } from '../types.js';
-import type { NodeFactory, SerializedGraph } from './types.js';
+import type { NodeLoader, SerializedGraph } from './types.js';
 
 export type CapabilityFactory = {
 	name: string;
@@ -456,7 +456,7 @@ export class Graph {
 	 */
 	async deserialize(
 		serialized: SerializedGraph,
-		lookup: Record<string, NodeFactory>
+		lookup: NodeLoader
 	): Promise<Graph> {
 		const version =
 			(serialized.annotations && serialized.annotations['engine.version']) ||
@@ -484,7 +484,7 @@ export class Graph {
 
 		await Promise.all(
 			serialized.nodes.map(async node => {
-				const factory = lookup[node.type];
+				const factory = await lookup(node.type);
 				return await factory.deserialize({
 					serialized: node,
 					graph: this,
diff --git a/packages/graph-engine/src/graph/types.ts b/packages/graph-engine/src/graph/types.ts
index 41ffff903..a6be45cf0 100644
--- a/packages/graph-engine/src/graph/types.ts
+++ b/packages/graph-engine/src/graph/types.ts
@@ -5,7 +5,7 @@ import { Node } from '../programmatic/node.js';
 export interface SerializedInput {
 	name: string;
 	value?: any;
-	visible: boolean;
+	visible?: boolean;
 	variadic?: boolean;
 	type: TypeDefinition;
 	dynamicType?: GraphSchema;
@@ -37,7 +37,9 @@ export interface SerializedGraph {
 export type IDeserializeOpts = {
 	serialized: SerializedNode;
 	graph: Graph;
-	lookup: Record<string, NodeFactory>;
+	lookup: NodeLoader;
 };
 
 export type NodeFactory = typeof Node;
+
+export type NodeLoader = (type: string) => Promise<NodeFactory> | NodeFactory;
diff --git a/packages/graph-engine/src/nodes/generic/subgraph.ts b/packages/graph-engine/src/nodes/generic/subgraph.ts
index d9edb3df2..0f1b2c3c7 100644
--- a/packages/graph-engine/src/nodes/generic/subgraph.ts
+++ b/packages/graph-engine/src/nodes/generic/subgraph.ts
@@ -14,7 +14,7 @@ import InputNode from './input.js';
 import OutputNode from './output.js';
 
 export interface SerializedSubgraphNode extends SerializedNode {
-	innergraph: SerializedGraph;
+	innergraph?: SerializedGraph;
 }
 export interface ISubgraphNode extends INodeDefinition {
 	innergraph?: Graph;
@@ -124,10 +124,12 @@ export default class SubgraphNode extends Node {
 	}
 
 	static override async deserialize(opts: IDeserializeOpts) {
-		const innergraph = await new Graph().deserialize(
-			(opts.serialized as SerializedSubgraphNode).innergraph,
-			opts.lookup
-		);
+		const serializedInner = (opts.serialized as SerializedSubgraphNode)
+			.innergraph;
+
+		const innergraph = serializedInner
+			? await new Graph().deserialize(serializedInner, opts.lookup)
+			: undefined;
 
 		const node = (await super.deserialize({
 			...opts,
diff --git a/packages/graph-engine/src/programmatic/input.ts b/packages/graph-engine/src/programmatic/input.ts
index ffbe67782..430036399 100644
--- a/packages/graph-engine/src/programmatic/input.ts
+++ b/packages/graph-engine/src/programmatic/input.ts
@@ -10,7 +10,7 @@ export interface IInputProps<T = any> {
 	name: string;
 	type: GraphSchema;
 	value: T;
-	visible: boolean;
+	visible?: boolean;
 	node: Node;
 	variadic?: boolean;
 	annotations?: Record<string, any>;
diff --git a/packages/graph-engine/src/programmatic/port.ts b/packages/graph-engine/src/programmatic/port.ts
index 0607c74db..613f62050 100644
--- a/packages/graph-engine/src/programmatic/port.ts
+++ b/packages/graph-engine/src/programmatic/port.ts
@@ -5,7 +5,7 @@ import { action, computed, makeObservable, observable } from 'mobx';
 
 export interface IPort<T = any> {
 	name: string;
-	visible: boolean;
+	visible?: boolean;
 	node: Node;
 	type: GraphSchema;
 	value: T;
diff --git a/packages/graph-engine/tests/suites/basic.test.ts b/packages/graph-engine/tests/suites/basic.test.ts
index 8f66b4c96..60d48fdac 100644
--- a/packages/graph-engine/tests/suites/basic.test.ts
+++ b/packages/graph-engine/tests/suites/basic.test.ts
@@ -1,9 +1,4 @@
-import {
-	Graph,
-	NodeFactory,
-	SerializedGraph,
-	nodeLookup
-} from '../../src/index.js';
+import { Graph, SerializedGraph, nodeLookup } from '../../src/index.js';
 import { describe, expect, test } from 'vitest';
 import basic from '../data/processed/basic.js';
 
@@ -11,7 +6,7 @@ describe('basic', () => {
 	test('performs basic passthrough calculations', async () => {
 		const graph = await new Graph().deserialize(
 			basic as unknown as SerializedGraph,
-			nodeLookup as Record<string, NodeFactory>
+			key => nodeLookup[key]
 		);
 
 		const result = await graph.execute();
diff --git a/packages/graph-engine/tests/suites/graph/loader.test.ts b/packages/graph-engine/tests/suites/graph/loader.test.ts
new file mode 100644
index 000000000..d35e4c718
--- /dev/null
+++ b/packages/graph-engine/tests/suites/graph/loader.test.ts
@@ -0,0 +1,71 @@
+import { Graph, SerializedGraph, nodeLookup } from '../../../src/index.js';
+import { describe, expect, test } from 'vitest';
+
+describe('Loader', () => {
+	test('handles async loading of nodes', async () => {
+		const serialized = {
+			nodes: [
+				{
+					id: 'x',
+					type: 'studio.tokens.generic.input',
+					inputs: [
+						{
+							name: 'foo',
+							type: {
+								$id: 'https://schemas.tokens.studio/string.json',
+								title: 'String',
+								type: 'string'
+							}
+						}
+					],
+					annotations: {
+						'engine.singleton': true,
+						'engine.dynamicInputs': true
+					}
+				},
+				{
+					id: 'y',
+					type: 'studio.tokens.generic.output',
+					inputs: [
+						{
+							name: 'input',
+							value: 'black',
+							type: {
+								$id: 'https://schemas.tokens.studio/string.json',
+								title: 'String',
+								type: 'string'
+							}
+						}
+					],
+					annotations: {
+						'engine.singleton': true,
+						'engine.dynamicInputs': true
+					}
+				}
+			],
+			edges: [],
+			annotations: {
+				'engine.id': '5dc7b415-9e46-455c-9375-2380b7fbdfa5',
+				'engine.version': '0.12.0'
+			}
+		} as SerializedGraph;
+
+		const nodeLoader = async key => {
+			return Promise.resolve(nodeLookup[key]);
+		};
+
+		const newGraph = await new Graph().deserialize(serialized, nodeLoader);
+		const deserializedOutput = await newGraph.execute();
+
+		expect(deserializedOutput.output).to.eql({
+			input: {
+				type: {
+					$id: 'https://schemas.tokens.studio/string.json',
+					title: 'String',
+					type: 'string'
+				},
+				value: 'black'
+			}
+		});
+	});
+});
diff --git a/packages/graph-engine/tests/suites/nodeUsage.test.ts b/packages/graph-engine/tests/suites/nodeUsage.test.ts
index d11076251..ed7feb30d 100644
--- a/packages/graph-engine/tests/suites/nodeUsage.test.ts
+++ b/packages/graph-engine/tests/suites/nodeUsage.test.ts
@@ -4,6 +4,8 @@ import { describe, expect, test } from 'vitest';
 import InputNode from '../../src/nodes/generic/input.js';
 import OutputNode from '../../src/nodes/generic/output.js';
 
+const nodeLoader = key => nodeLookup[key];
+
 describe('nodeUsage', () => {
 	test('performs basic passthrough calculations', async () => {
 		const graph = new Graph();
@@ -113,7 +115,7 @@ describe('nodeUsage', () => {
 			}
 		]);
 
-		const newGraph = await new Graph().deserialize(serialized, nodeLookup);
+		const newGraph = await new Graph().deserialize(serialized, nodeLoader);
 		const deserializedOutput = await newGraph.execute();
 
 		expect(deserializedOutput.output).to.eql({
diff --git a/packages/nodes-design-tokens/src/ui/controls/index.tsx b/packages/nodes-design-tokens/src/ui/controls/index.tsx
index 7497c45d8..b602ce3db 100644
--- a/packages/nodes-design-tokens/src/ui/controls/index.tsx
+++ b/packages/nodes-design-tokens/src/ui/controls/index.tsx
@@ -1,6 +1,7 @@
-import { TOKEN } from '../../schemas/index.js';
-import { TokenArrayField } from './tokenSet.js';
+import { TOKEN, TOKEN_SET } from '../../schemas/index.js';
+import { TokenArrayField } from './tokenArray.js';
 import { TokenField } from './token.js';
+import { TokenSetField } from './tokenSet.js';
 import { VariadicTokenSet } from './variadicTokenSet.js';
 import { variadicMatcher } from '@tokens-studio/graph-editor';
 import type { Input, Port } from '@tokens-studio/graph-engine';
@@ -17,6 +18,12 @@ export const controls = [
 		},
 		component: TokenArrayField
 	},
+
+	{
+		matcher: (port: Port) => port.type.$id === TOKEN_SET,
+		component: TokenSetField
+	},
+
 	{
 		matcher: (port: Port) => port.type.$id === TOKEN,
 		component: TokenField
diff --git a/packages/nodes-design-tokens/src/ui/controls/tokenArray.tsx b/packages/nodes-design-tokens/src/ui/controls/tokenArray.tsx
new file mode 100644
index 000000000..e7452d227
--- /dev/null
+++ b/packages/nodes-design-tokens/src/ui/controls/tokenArray.tsx
@@ -0,0 +1,48 @@
+import { Accordion, Button, Separator, Stack } from '@tokens-studio/ui';
+import { IField, flatTokensRestoreToMap } from '@tokens-studio/graph-editor';
+import { Token } from './token.js';
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+
+export const TokenArrayField = ({ port }: IField) => {
+	return <TokenArrayFieldInner value={port.value} />;
+};
+
+export const TokenArrayFieldInner = observer(({ value }) => {
+	const downloadTokens = () => {
+		const element = document.createElement('a');
+		const asObj = flatTokensRestoreToMap(value);
+		const file = new Blob([JSON.stringify(asObj)], {
+			type: 'application/json'
+		});
+		element.href = URL.createObjectURL(file);
+		element.download = 'tokens.json';
+		document.body.appendChild(element);
+		element.click();
+	};
+
+	return (
+		<Stack gap={4} direction='column' align='center'>
+			<Accordion type='multiple' defaultValue={['tokens']}>
+				<Accordion.Item value='tokens'>
+					<Accordion.Trigger>Tokens</Accordion.Trigger>
+					<Separator orientation='horizontal' />
+					<Accordion.Content>
+						<Stack
+							gap={4}
+							direction='column'
+							align='center'
+							style={{ padding: 'var(--component-spacing-md)' }}
+						>
+							{(value || []).map(token => (
+								<Token token={token} key={token.name} />
+							))}
+						</Stack>
+					</Accordion.Content>
+				</Accordion.Item>
+			</Accordion>
+
+			<Button onClick={downloadTokens}>Download</Button>
+		</Stack>
+	);
+});
diff --git a/packages/nodes-design-tokens/src/ui/controls/tokenSet.tsx b/packages/nodes-design-tokens/src/ui/controls/tokenSet.tsx
index 010692c20..26d0b62bc 100644
--- a/packages/nodes-design-tokens/src/ui/controls/tokenSet.tsx
+++ b/packages/nodes-design-tokens/src/ui/controls/tokenSet.tsx
@@ -1,13 +1,14 @@
 import { Accordion, Button, Separator, Stack } from '@tokens-studio/ui';
-import { IField, flatTokensRestoreToMap } from '@tokens-studio/graph-editor';
+import { IField } from '@tokens-studio/graph-editor';
 import { Token } from './token.js';
+import { flatten } from '../../utils/index.js';
 import { observer } from 'mobx-react-lite';
-import React from 'react';
+import React, { useMemo } from 'react';
 
-export const TokenArrayField = observer(({ port }: IField) => {
+export const TokenSetField = observer(({ port }: IField) => {
 	const downloadTokens = () => {
 		const element = document.createElement('a');
-		const asObj = flatTokensRestoreToMap(port.value);
+		const asObj = port.value;
 		const file = new Blob([JSON.stringify(asObj)], {
 			type: 'application/json'
 		});
@@ -17,6 +18,8 @@ export const TokenArrayField = observer(({ port }: IField) => {
 		element.click();
 	};
 
+	const tokens = useMemo(() => flatten(port.value || {}), []);
+
 	return (
 		<Stack gap={4} direction='column' align='center'>
 			<Accordion type='multiple' defaultValue={['tokens']}>
@@ -30,7 +33,7 @@ export const TokenArrayField = observer(({ port }: IField) => {
 							align='center'
 							style={{ padding: 'var(--component-spacing-md)' }}
 						>
-							{(port.value || []).map(token => (
+							{tokens.map(token => (
 								<Token token={token} key={token.name} />
 							))}
 						</Stack>
diff --git a/packages/ui/package.json b/packages/ui/package.json
index f53a9fca3..2a9c30881 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -74,7 +74,7 @@
     "prisma": "5.16.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-error-boundary": "4.0.11",
+    "react-error-boundary": "^4.0.13",
     "react-joyride": "2.8.1",
     "react-no-ssr": "1.1.0",
     "react-redux": "^8.0.5",
diff --git a/packages/ui/prisma/schema.prisma b/packages/ui/prisma/schema.prisma
index 4d9fadda9..7c7256ef7 100644
--- a/packages/ui/prisma/schema.prisma
+++ b/packages/ui/prisma/schema.prisma
@@ -3,6 +3,7 @@
 
 generator client {
   provider = "prisma-client-js"
+  previewFeatures = ["fullTextSearch"]
 }
 
 datasource db {
diff --git a/packages/ui/src/api/contracts/marketplace.ts b/packages/ui/src/api/contracts/marketplace.ts
index 30bda508f..7995bade5 100644
--- a/packages/ui/src/api/contracts/marketplace.ts
+++ b/packages/ui/src/api/contracts/marketplace.ts
@@ -1,3 +1,4 @@
+import { SerializedGraph } from '../schemas/graph.ts';
 import { initContract } from '@ts-rest/core';
 import { z } from 'zod';
 
@@ -24,9 +25,9 @@ export const marketplaceContract = c.router({
 		}
 	},
 	getGraph: {
-		summary: 'Retrieves a graph',
+		summary: 'Gets a graphs metadata',
 		method: 'GET',
-		path: '/marketplace/graph/:id',
+		path: '/marketplace/graph/:id/meta',
 		pathParams: z.object({
 			id: z.string()
 		}),
@@ -48,6 +49,21 @@ export const marketplaceContract = c.router({
 			})
 		}
 	},
+	retrieveGraph: {
+		summary: 'Retrieves a graph',
+		method: 'GET',
+		path: '/marketplace/graph/:id/graph',
+		pathParams: z.object({
+			id: z.string()
+		}),
+		responses: {
+			200: z.object({
+				id: z.string(),
+				graph: SerializedGraph,
+				version: z.string()
+			})
+		}
+	},
 	likeGraph: {
 		summary: 'Likes a graph',
 		method: 'POST',
@@ -60,12 +76,38 @@ export const marketplaceContract = c.router({
 			200: z.object({})
 		}
 	},
+	searchGraphs: {
+		summary: 'Searches through marketplace graphs ',
+		method: 'GET',
+		path: '/marketplace/graphs/search',
+
+		query: z.object({
+			name: z.string(),
+			take: z.number().lte(20).gte(1).optional().default(10),
+			skip: z.number().gte(0).optional().default(0),
+			token: z.string().optional().describe('The token to use for pagination')
+		}),
+
+		responses: {
+			200: z.object({
+				graphs: z.array(
+					z.object({
+						name: z.string(),
+						id: z.string(),
+						description: z.string().nullable()
+					})
+				),
+				token: z.string().optional()
+			})
+		}
+	},
 	listGraphs: {
 		summary: 'Lists all public graphs ',
 		method: 'GET',
 		path: '/marketplace/graphs',
 
 		query: z.object({
+			containsText: z.string().optional(),
 			take: z.number().lte(50).gte(1).optional().default(10),
 			skip: z.number().gte(0).optional().default(0),
 			token: z.string().optional().describe('The token to use for pagination')
@@ -93,7 +135,6 @@ export const marketplaceContract = c.router({
 			})
 		}
 	},
-
 	editGraph: {
 		summary: 'Edits an existing graph',
 		method: 'PUT',
diff --git a/packages/ui/src/api/controllers/marketplace.ts b/packages/ui/src/api/controllers/marketplace.ts
index 657acfb76..52ad74a6e 100644
--- a/packages/ui/src/api/controllers/marketplace.ts
+++ b/packages/ui/src/api/controllers/marketplace.ts
@@ -318,9 +318,96 @@ export const router = tsr.router<typeof marketplaceContract, Context>(
 				}
 			};
 		},
-		listGraphs: async ({ query }) => {
+
+		retrieveGraph: async ({ params }) => {
+			const { id } = params;
+			const graph = await prisma.publishedGraph.findFirst({
+				where: {
+					id
+				},
+				include: {
+					versions: true
+				}
+			});
+
+			if (!graph) {
+				return {
+					status: 404,
+					body: {
+						message: 'Graph not found'
+					}
+				};
+			}
+
+			//Check for versions
+			const latestVersion = graph.versions[0];
+
+			if (!latestVersion) {
+				return {
+					status: 404,
+					body: {
+						message: 'Graph not found'
+					}
+				};
+			}
+
+			return {
+				status: 201,
+				body: {
+					id: latestVersion.id,
+					graph: latestVersion.graph,
+					verison: latestVersion.version
+				}
+			};
+		},
+
+		searchGraphs: async ({ query }) => {
 			const cursorAdd = withCursor(query.token);
 
+			const where: Prisma.PublishedGraphWhereInput = {
+				name: {
+					contains: query.name,
+					mode: 'insensitive'
+				}
+			};
+
+			const graphs = await prisma.publishedGraph.findMany({
+				where,
+				take: query.take,
+				skip: query.skip,
+				orderBy: [
+					// If searching, prioritize exact matches and then partial matches
+					{
+						_relevance: {
+							fields: ['name'],
+							search: query.name,
+							sort: 'desc'
+						}
+					},
+					{ updatedAt: 'desc' }
+				],
+				select: {
+					name: true,
+					id: true,
+					description: true
+				},
+				...cursorAdd
+			});
+
+			const token =
+				graphs.length > 0 ? graphs?.[graphs.length - 1]?.id : undefined;
+
+			return {
+				status: 200,
+				body: {
+					token,
+					graphs: graphs
+				}
+			};
+		},
+
+		listGraphs: async ({ query }) => {
+			const cursorAdd = withCursor(query.token);
 			const graphs = await prisma.publishedGraph.findMany({
 				take: query.take,
 				skip: query.skip,
diff --git a/packages/ui/src/components/editor/index.tsx b/packages/ui/src/components/editor/index.tsx
index 09b77a072..6e1f23af9 100644
--- a/packages/ui/src/components/editor/index.tsx
+++ b/packages/ui/src/components/editor/index.tsx
@@ -4,7 +4,6 @@ import { DropPanelInner, Editor } from '@tokens-studio/graph-editor';
 import { EmptyStateEditor } from '../EmptyStateEditor.tsx';
 import { ErrorBoundary } from 'react-error-boundary';
 import { ExamplesPicker } from '../ExamplesPicker.tsx';
-import { Spinner } from '@tokens-studio/ui/Spinner.js';
 import {
 	capabilities,
 	controls,
@@ -16,10 +15,16 @@ import {
 	specifics
 } from './data.tsx';
 import { defaultLayout } from './layout.ts';
+import { loadCompounds } from '@/data/compounds/index.tsx';
 import { observer } from 'mobx-react-lite';
+import { tabLoader } from './tabLoader.tsx';
 import { useGetEditor } from '@/hooks/useGetEditor.ts';
 import React, { useCallback } from 'react';
+import Spinner from '../spinner/index.tsx';
 import globalState from '@/mobx/index.tsx';
+import initialLayout from '@/data/layout/default.json';
+import styles from './styles.module.css';
+import type { LayoutBase } from 'rc-dock';
 import type { ReactElement } from 'react';
 import type { TabBase, TabData } from 'rc-dock';
 
@@ -59,16 +64,19 @@ export const EditorTab = observer(
 		}, []);
 
 		return (
-			<div style={{ position: 'relative', width: '100%', height: '100%' }}>
+			<div className={styles.container}>
 				<Editor
 					id={''}
 					// @ts-ignore
 					ref={ref}
 					showMenu={false}
 					menuItems={menu}
+					initialLayout={initialLayout as unknown as LayoutBase}
 					panelItems={panelItems}
 					nodeTypes={nodeTypes}
+					nodeLoader={loadCompounds}
 					capabilities={capabilities}
+					tabLoader={tabLoader}
 					controls={controls}
 					initialLayout={defaultLayout}
 					tabLoader={tabLoader}
@@ -86,25 +94,7 @@ export const EditorTab = observer(
 						loadExample={loadExample}
 					/>
 				}
-				{loading && (
-					<div
-						style={{
-							position: 'absolute',
-							top: 0,
-							left: 0,
-							width: '100%',
-							height: '100%',
-							backgroundColor: 'var(--color-neutral-canvas-minimal-bg)',
-							opacity: 0.5,
-							zIndex: 1000,
-							display: 'flex',
-							alignItems: 'center',
-							justifyContent: 'center'
-						}}
-					>
-						<Spinner />
-					</div>
-				)}
+				{loading && <Spinner />}
 			</div>
 		);
 	},
diff --git a/packages/ui/src/components/editor/nodeTypes.tsx b/packages/ui/src/components/editor/nodeTypes.tsx
index 944d7c665..5d49cf2ff 100644
--- a/packages/ui/src/components/editor/nodeTypes.tsx
+++ b/packages/ui/src/components/editor/nodeTypes.tsx
@@ -10,8 +10,7 @@ const flatten = nodes =>
 		return acc;
 	}, {});
 
-//These are all the nodes that are available in the editor
-export const nodeTypes = {
+const defaultNodes = {
 	//Default
 	...nodeLookup,
 	//Audio
@@ -20,3 +19,6 @@ export const nodeTypes = {
 	...flatten(figmaNodes),
 	...flatten(previewNodes)
 };
+
+//These are all the nodes that are available in the editor
+export const nodeTypes = defaultNodes;
diff --git a/packages/ui/src/components/editor/styles.module.css b/packages/ui/src/components/editor/styles.module.css
new file mode 100644
index 000000000..84185f097
--- /dev/null
+++ b/packages/ui/src/components/editor/styles.module.css
@@ -0,0 +1,5 @@
+.container {
+    position: relative;
+    width: 100%;
+    height: 100%
+}
\ No newline at end of file
diff --git a/packages/ui/src/components/editor/tabLoader.tsx b/packages/ui/src/components/editor/tabLoader.tsx
new file mode 100644
index 000000000..36932140c
--- /dev/null
+++ b/packages/ui/src/components/editor/tabLoader.tsx
@@ -0,0 +1,44 @@
+import { AISummary } from '../panels/aiSummary.tsx';
+import { DropPanelInner } from '@tokens-studio/graph-editor/index.js';
+import { ErrorBoundary } from 'react-error-boundary';
+import { MarketPlace } from '../panels/marketPlace.tsx';
+import { Preview } from '../panels/preview.tsx';
+import { TabBase, TabData } from 'rc-dock';
+import { previewItems } from './previewItem.tsx';
+
+export const tabLoader = (tab: TabBase): TabData | undefined => {
+	switch (tab.id) {
+		case 'ai':
+			return {
+				...tab,
+				title: 'Artificial intelligence',
+				content: <AISummary />
+			};
+		case 'preview':
+			return {
+				...tab,
+				title: 'Preview',
+				content: <Preview />
+			};
+		case 'marketplace':
+			return {
+				...tab,
+				title: 'Marketplace',
+				content: <MarketPlace />
+			};
+		case 'previewNodesPanel':
+			return {
+				group: 'popout',
+				title: 'Preview',
+				content: (
+					<ErrorBoundary fallback={<div>Error</div>}>
+						<DropPanelInner data={previewItems} />
+					</ErrorBoundary>
+				),
+				closable: true
+			};
+
+		default:
+			return undefined;
+	}
+};
diff --git a/packages/ui/src/components/editor/toolbar.tsx b/packages/ui/src/components/editor/toolbar.tsx
index 1bd0d24ea..c05a9acf5 100644
--- a/packages/ui/src/components/editor/toolbar.tsx
+++ b/packages/ui/src/components/editor/toolbar.tsx
@@ -14,9 +14,9 @@ import {
 	useOpenPanel
 } from '@tokens-studio/graph-editor';
 
-import { AISummary } from './panels/aiSummary.tsx';
+import { AISummary } from '../panels/aiSummary.tsx';
 import { IconButton, Tooltip } from '@tokens-studio/ui';
-import { Preview } from './panels/preview.tsx';
+import { Preview } from '../panels/preview.tsx';
 import { ShareAndroidSolid } from 'iconoir-react';
 import { SharePopover } from '../share/index.tsx';
 import { client } from '@/api/sdk/index.ts';
@@ -125,7 +125,7 @@ export const AiSummary = () => {
 				onClick={() =>
 					toggle({
 						group: 'popout',
-						title: <span>Artificial intelligence</span>,
+						title: 'Artificial intelligence',
 						id: 'ai',
 						content: <AISummary />
 					})
@@ -145,7 +145,7 @@ export const PreviewButton = () => {
 				onClick={() =>
 					toggle({
 						group: 'popout',
-						title: <span>Preview</span>,
+						title: 'Preview',
 						id: 'preview',
 						content: <Preview />
 					})
diff --git a/packages/ui/src/components/editor/panels/aiSummary.tsx b/packages/ui/src/components/panels/aiSummary.tsx
similarity index 100%
rename from packages/ui/src/components/editor/panels/aiSummary.tsx
rename to packages/ui/src/components/panels/aiSummary.tsx
diff --git a/packages/ui/src/components/panels/marketPlace.tsx b/packages/ui/src/components/panels/marketPlace.tsx
new file mode 100644
index 000000000..dc9ae0199
--- /dev/null
+++ b/packages/ui/src/components/panels/marketPlace.tsx
@@ -0,0 +1,52 @@
+import { DragItem, PanelGroup } from '@tokens-studio/graph-editor';
+import { Spinner } from '@tokens-studio/ui/Spinner.js';
+import { Stack } from '@tokens-studio/ui/Stack.js';
+import { TextInput } from '@tokens-studio/ui/TextInput.js';
+import { client } from '@/api/sdk/index.ts';
+import DatabaseScript from '@tokens-studio/icons/DatabaseScript.js';
+import React, { useCallback } from 'react';
+
+export const compoundNodesDrop = new PanelGroup({
+	title: 'Compounds',
+	key: 'compounds',
+	icon: <DatabaseScript />,
+	items: [
+		{
+			type: 'data.compounds.smoothShadow',
+			text: 'Smooth Shadow',
+			description: 'A compound node that generates a smooth shadow effect',
+			docs: ''
+		}
+	]
+});
+
+export const MarketPlace = () => {
+	const [search, setSearch] = React.useState('');
+
+	const { isLoading, data } = client.marketplace.searchGraphs.useQuery(
+		['searchGraph', search],
+		{
+			query: {
+				name: search as string
+			}
+		}
+	);
+
+	const onChange = useCallback(e => setSearch(e.target.value), []);
+
+	return (
+		<Stack direction='column' gap={3}>
+			<TextInput placeholder='Search…' value={search} onChange={onChange} />
+
+			{isLoading && <Spinner />}
+			{!isLoading &&
+				data?.body.graphs.map(graph => (
+					<DragItem
+						type={`graph.${graph.id}`}
+						key={graph.id}
+						title={graph.name}
+					/>
+				))}
+		</Stack>
+	);
+};
diff --git a/packages/ui/src/components/editor/panels/preview.tsx b/packages/ui/src/components/panels/preview.tsx
similarity index 100%
rename from packages/ui/src/components/editor/panels/preview.tsx
rename to packages/ui/src/components/panels/preview.tsx
diff --git a/packages/ui/src/components/spinner/index.tsx b/packages/ui/src/components/spinner/index.tsx
new file mode 100644
index 000000000..8b03406b6
--- /dev/null
+++ b/packages/ui/src/components/spinner/index.tsx
@@ -0,0 +1,8 @@
+import { Spinner } from '@tokens-studio/ui/Spinner.js';
+import styles from './styles.module.css';
+
+export default () => (
+	<div className={styles.center}>
+		<Spinner />
+	</div>
+);
diff --git a/packages/ui/src/components/spinner/styles.module.css b/packages/ui/src/components/spinner/styles.module.css
new file mode 100644
index 000000000..64ce9c645
--- /dev/null
+++ b/packages/ui/src/components/spinner/styles.module.css
@@ -0,0 +1,13 @@
+.center {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--color-neutral-canvas-minimal-bg);
+    opacity: 0.5;
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
\ No newline at end of file
diff --git a/packages/ui/src/data/compounds/index.tsx b/packages/ui/src/data/compounds/index.tsx
new file mode 100644
index 000000000..055ad4c84
--- /dev/null
+++ b/packages/ui/src/data/compounds/index.tsx
@@ -0,0 +1,41 @@
+import { Graph } from '@tokens-studio/graph-engine';
+import { client } from '@/api/sdk/index.ts';
+import { nodeTypes } from '@/components/editor/nodeTypes.tsx';
+import Subgraph from '@tokens-studio/graph-engine/nodes/generic/subgraph.js';
+
+export const loadCompounds = async (type: string) => {
+	if (type.startsWith('graph.')) {
+		const raw = await client.marketplace.retrieveGraph.query({
+			params: {
+				id: type.split('.')[1]
+			}
+		});
+
+		const innergraph = await new Graph().deserialize(
+			raw.body.graph,
+			loadCompounds
+		);
+
+		return class CustomNode extends Subgraph {
+			static type = type;
+			constructor(data) {
+				super({
+					...data,
+					innergraph
+				});
+			}
+
+			override serialize() {
+				const serialized = super.serialize();
+				// Don't store the innergraph
+				serialized.innergraph = undefined;
+				return serialized;
+			}
+			static override async deserialize(opts) {
+				return await super.deserialize({ ...opts, innergraph: raw.body.graph });
+			}
+		};
+	} else {
+		return nodeTypes[type];
+	}
+};
diff --git a/packages/ui/src/data/compounds/smoothShadow.json b/packages/ui/src/data/compounds/smoothShadow.json
new file mode 100644
index 000000000..5b7b6f1dc
--- /dev/null
+++ b/packages/ui/src/data/compounds/smoothShadow.json
@@ -0,0 +1,2801 @@
+{
+	"nodes": [
+		{
+			"id": "acc83d6c-bb42-45a0-9574-944fc6a18916",
+			"type": "studio.tokens.generic.input",
+			"inputs": [
+				{
+					"name": "layers",
+					"value": 5,
+					"type": {
+						"$id": "https://schemas.tokens.studio/number.json",
+						"title": "Number",
+						"type": "number"
+					},
+					"visible": false,
+					"annotations": { "ui.deletable": true }
+				},
+				{
+					"name": "finalTransparency",
+					"value": 0.11,
+					"type": {
+						"$id": "https://schemas.tokens.studio/number.json",
+						"title": "Number",
+						"type": "number"
+					},
+					"visible": false,
+					"annotations": { "ui.deletable": true }
+				},
+				{
+					"name": "transparencyCurve",
+					"value": {
+						"controlPoints": [
+							[
+								[0.14219337573716578, 0.7274187304710118],
+								[0.81242438670312, 0.3426880696053026]
+							]
+						],
+						"segments": [
+							[0, 0],
+							[1, 1]
+						]
+					},
+					"type": {
+						"$id": "https://schemas.tokens.studio/floatCurve.json",
+						"title": "Float curve",
+						"type": "object",
+						"default": {
+							"controlPoints": [
+								[
+									[0.25, 0.25],
+									[0.75, 0.75]
+								]
+							],
+							"segments": [
+								[0, 0],
+								[1, 1]
+							]
+						},
+						"properties": {
+							"segments": {
+								"type": "array",
+								"items": {
+									"type": "array",
+									"items": {
+										"type": "array",
+										"items": [{ "type": "number" }, { "type": "number" }]
+									}
+								}
+							},
+							"controlPoints": {
+								"type": "array",
+								"items": {
+									"type": "array",
+									"items": [{ "type": "number" }, { "type": "number" }]
+								}
+							}
+						}
+					},
+					"visible": false,
+					"annotations": { "ui.deletable": true }
+				},
+				{
+					"name": "horizontalDistance",
+					"value": 8,
+					"type": {
+						"$id": "https://schemas.tokens.studio/number.json",
+						"title": "Number",
+						"type": "number"
+					},
+					"visible": false,
+					"annotations": { "ui.deletable": true }
+				},
+				{
+					"name": "verticalDistance",
+					"value": 8,
+					"type": {
+						"$id": "https://schemas.tokens.studio/number.json",
+						"title": "Number",
+						"type": "number"
+					},
+					"visible": false,
+					"annotations": { "ui.deletable": true }
+				},
+				{
+					"name": "distanceCurve",
+					"value": {
+						"controlPoints": [
+							[
+								[0.17052797122027868, 0.6089303215977628],
+								[0.8822099930827179, 0.3961354099429192]
+							]
+						],
+						"segments": [
+							[0, 0],
+							[1, 1]
+						]
+					},
+					"type": {
+						"$id": "https://schemas.tokens.studio/floatCurve.json",
+						"title": "Float curve",
+						"type": "object",
+						"default": {
+							"controlPoints": [
+								[
+									[0.25, 0.25],
+									[0.75, 0.75]
+								]
+							],
+							"segments": [
+								[0, 0],
+								[1, 1]
+							]
+						},
+						"properties": {
+							"segments": {
+								"type": "array",
+								"items": {
+									"type": "array",
+									"items": {
+										"type": "array",
+										"items": [{ "type": "number" }, { "type": "number" }]
+									}
+								}
+							},
+							"controlPoints": {
+								"type": "array",
+								"items": {
+									"type": "array",
+									"items": [{ "type": "number" }, { "type": "number" }]
+								}
+							}
+						}
+					},
+					"visible": false,
+					"annotations": { "ui.deletable": true }
+				},
+				{
+					"name": "blur",
+					"value": 20,
+					"type": {
+						"$id": "https://schemas.tokens.studio/number.json",
+						"title": "Number",
+						"type": "number"
+					},
+					"visible": false,
+					"annotations": { "ui.deletable": true }
+				},
+				{
+					"name": "blurCurve",
+					"value": {
+						"controlPoints": [
+							[
+								[0.8627544900645381, 0.07411938476562502],
+								[1, 0.05392041015624993]
+							]
+						],
+						"segments": [
+							[0, 0],
+							[1, 1]
+						]
+					},
+					"type": {
+						"$id": "https://schemas.tokens.studio/floatCurve.json",
+						"title": "Float curve",
+						"type": "object",
+						"default": {
+							"controlPoints": [
+								[
+									[0.25, 0.25],
+									[0.75, 0.75]
+								]
+							],
+							"segments": [
+								[0, 0],
+								[1, 1]
+							]
+						},
+						"properties": {
+							"segments": {
+								"type": "array",
+								"items": {
+									"type": "array",
+									"items": {
+										"type": "array",
+										"items": [{ "type": "number" }, { "type": "number" }]
+									}
+								}
+							},
+							"controlPoints": {
+								"type": "array",
+								"items": {
+									"type": "array",
+									"items": [{ "type": "number" }, { "type": "number" }]
+								}
+							}
+						}
+					},
+					"visible": false,
+					"annotations": { "ui.deletable": true }
+				},
+				{
+					"name": "reduceSpread",
+					"value": 2,
+					"type": {
+						"$id": "https://schemas.tokens.studio/number.json",
+						"title": "Number",
+						"type": "number"
+					},
+					"visible": false,
+					"annotations": { "ui.deletable": true }
+				},
+				{
+					"name": "color",
+					"value": {
+						"space": "srgb",
+						"channels": [0.7215686274509804, 0, 0],
+						"alpha": 1
+					},
+					"type": {
+						"$id": "https://schemas.tokens.studio/color.json",
+						"title": "Color",
+						"type": "object",
+						"properties": {
+							"channels": {
+								"type": "array",
+								"items": {
+									"$id": "https://schemas.tokens.studio/number.json",
+									"title": "Number",
+									"type": "number"
+								}
+							},
+							"space": {
+								"$id": "https://schemas.tokens.studio/string.json",
+								"title": "String",
+								"type": "string"
+							},
+							"alpha": {
+								"$id": "https://schemas.tokens.studio/number.json",
+								"title": "Number",
+								"type": "number"
+							}
+						},
+						"default": { "channels": [0, 0, 0], "space": "srgb" },
+						"required": ["channels", "space"]
+					},
+					"visible": false,
+					"annotations": { "ui.deletable": true }
+				}
+			],
+			"annotations": {
+				"engine.singleton": true,
+				"engine.dynamicInputs": true,
+				"xpos": 378.648681640625,
+				"ypos": 427.8787865953998,
+				"ui.position.x": 86.64868164062489,
+				"ui.position.y": 501.21211992873316
+			}
+		},
+		{
+			"id": "b5a484f5-1e3b-4a11-9530-680f6d8e0dde",
+			"type": "studio.tokens.series.linear",
+			"inputs": [
+				{
+					"name": "start",
+					"value": 0,
+					"type": {
+						"$id": "https://schemas.tokens.studio/number.json",
+						"title": "Number",
+						"type": "number",
+						"default": 0
+					}
+				},
+				{
+					"name": "stop",
+					"value": 1,
+					"type": {
+						"$id": "https://schemas.tokens.studio/number.json",
+						"title": "Number",
+						"type": "number",
+						"default": 1
+					}
+				},
+				{
+					"name": "length",
+					"value": 5,
+					"type": {
+						"$id": "https://schemas.tokens.studio/number.json",
+						"title": "Number",
+						"type": "number",
+						"default": 5
+					}
+				},
+				{
+					"name": "precision",
+					"value": 2,
+					"type": {
+						"$id": "https://schemas.tokens.studio/number.json",
+						"title": "Number",
+						"type": "number",
+						"default": 2
+					}
+				}
+			],
+			"annotations": {
+				"xpos": 575.9820149739584,
+				"ypos": 412.6666633143571,
+				"ui.position.x": 493.31534830729174,
+				"ui.position.y": 343.9999966476904
+			}
+		},
+		{
+			"id": "be3cbc58-94c8-4fd9-b3c6-fdc5e2ed1020",
+			"type": "tokens.studio.array.map",
+			"inputs": [
+				{
+					"name": "finalTransparency",
+					"value": 0.11,
+					"type": {
+						"$id": "https://schemas.tokens.studio/number.json",
+						"title": "Number",
+						"type": "number"
+					}
+				},
+				{
+					"name": "transparencyCurve",
+					"value": {
+						"controlPoints": [
+							[
+								[0.14219337573716578, 0.7274187304710118],
+								[0.81242438670312, 0.3426880696053026]
+							]
+						],
+						"segments": [
+							[0, 0],
+							[1, 1]
+						]
+					},
+					"type": {
+						"$id": "https://schemas.tokens.studio/floatCurve.json",
+						"title": "Float curve",
+						"type": "object",
+						"default": {
+							"controlPoints": [
+								[
+									[0.25, 0.25],
+									[0.75, 0.75]
+								]
+							],
+							"segments": [
+								[0, 0],
+								[1, 1]
+							]
+						},
+						"properties": {
+							"segments": {
+								"type": "array",
+								"items": {
+									"type": "array",
+									"items": {
+										"type": "array",
+										"items": [{ "type": "number" }, { "type": "number" }]
+									}
+								}
+							},
+							"controlPoints": {
+								"type": "array",
+								"items": {
+									"type": "array",
+									"items": [{ "type": "number" }, { "type": "number" }]
+								}
+							}
+						}
+					}
+				},
+				{
+					"name": "horizontalDistance",
+					"value": 8,
+					"type": {
+						"$id": "https://schemas.tokens.studio/number.json",
+						"title": "Number",
+						"type": "number"
+					}
+				},
+				{
+					"name": "verticalDistance",
+					"value": 8,
+					"type": {
+						"$id": "https://schemas.tokens.studio/number.json",
+						"title": "Number",
+						"type": "number"
+					}
+				},
+				{
+					"name": "distanceCurve",
+					"value": {
+						"controlPoints": [
+							[
+								[0.17052797122027868, 0.6089303215977628],
+								[0.8822099930827179, 0.3961354099429192]
+							]
+						],
+						"segments": [
+							[0, 0],
+							[1, 1]
+						]
+					},
+					"type": {
+						"$id": "https://schemas.tokens.studio/floatCurve.json",
+						"title": "Float curve",
+						"type": "object",
+						"default": {
+							"controlPoints": [
+								[
+									[0.25, 0.25],
+									[0.75, 0.75]
+								]
+							],
+							"segments": [
+								[0, 0],
+								[1, 1]
+							]
+						},
+						"properties": {
+							"segments": {
+								"type": "array",
+								"items": {
+									"type": "array",
+									"items": {
+										"type": "array",
+										"items": [{ "type": "number" }, { "type": "number" }]
+									}
+								}
+							},
+							"controlPoints": {
+								"type": "array",
+								"items": {
+									"type": "array",
+									"items": [{ "type": "number" }, { "type": "number" }]
+								}
+							}
+						}
+					}
+				},
+				{
+					"name": "blur",
+					"value": 20,
+					"type": {
+						"$id": "https://schemas.tokens.studio/number.json",
+						"title": "Number",
+						"type": "number"
+					}
+				},
+				{
+					"name": "blurCurve",
+					"value": {
+						"controlPoints": [
+							[
+								[0.8627544900645381, 0.07411938476562502],
+								[1, 0.05392041015624993]
+							]
+						],
+						"segments": [
+							[0, 0],
+							[1, 1]
+						]
+					},
+					"type": {
+						"$id": "https://schemas.tokens.studio/floatCurve.json",
+						"title": "Float curve",
+						"type": "object",
+						"default": {
+							"controlPoints": [
+								[
+									[0.25, 0.25],
+									[0.75, 0.75]
+								]
+							],
+							"segments": [
+								[0, 0],
+								[1, 1]
+							]
+						},
+						"properties": {
+							"segments": {
+								"type": "array",
+								"items": {
+									"type": "array",
+									"items": {
+										"type": "array",
+										"items": [{ "type": "number" }, { "type": "number" }]
+									}
+								}
+							},
+							"controlPoints": {
+								"type": "array",
+								"items": {
+									"type": "array",
+									"items": [{ "type": "number" }, { "type": "number" }]
+								}
+							}
+						}
+					}
+				},
+				{
+					"name": "reduceSpread",
+					"value": 2,
+					"type": {
+						"$id": "https://schemas.tokens.studio/number.json",
+						"title": "Number",
+						"type": "number"
+					}
+				},
+				{
+					"name": "color",
+					"value": {
+						"space": "srgb",
+						"channels": [0.7215686274509804, 0, 0],
+						"alpha": 1
+					},
+					"type": {
+						"$id": "https://schemas.tokens.studio/color.json",
+						"title": "Color",
+						"type": "object",
+						"properties": {
+							"channels": {
+								"type": "array",
+								"items": {
+									"$id": "https://schemas.tokens.studio/number.json",
+									"title": "Number",
+									"type": "number"
+								}
+							},
+							"space": {
+								"$id": "https://schemas.tokens.studio/string.json",
+								"title": "String",
+								"type": "string"
+							},
+							"alpha": {
+								"$id": "https://schemas.tokens.studio/number.json",
+								"title": "Number",
+								"type": "number"
+							}
+						},
+						"default": { "channels": [0, 0, 0], "space": "srgb" },
+						"required": ["channels", "space"]
+					}
+				},
+				{
+					"name": "array",
+					"value": [0, 0.25, 0.5, 0.75, 1],
+					"type": {
+						"title": "Any[]",
+						"type": "array",
+						"items": {
+							"$id": "https://schemas.tokens.studio/any.json",
+							"title": "Any"
+						},
+						"default": []
+					},
+					"dynamicType": {
+						"type": "array",
+						"items": {
+							"$id": "https://schemas.tokens.studio/number.json",
+							"title": "Number",
+							"type": "number"
+						}
+					},
+					"annotations": { "ui.editable": false }
+				}
+			],
+			"annotations": {
+				"xpos": 741.3153483072916,
+				"ypos": 459.3333299810238,
+				"ui.position.x": 907.3153483072914,
+				"ui.position.y": 421.3333299810238
+			},
+			"innergraph": {
+				"nodes": [
+					{
+						"id": "063f5476-ca80-4609-b2db-fde8e87be84f",
+						"type": "studio.tokens.generic.input",
+						"inputs": [
+							{
+								"name": "value",
+								"value": 1,
+								"type": {
+									"$id": "https://schemas.tokens.studio/any.json",
+									"title": "Any"
+								},
+								"dynamicType": {
+									"$id": "https://schemas.tokens.studio/number.json",
+									"title": "Number",
+									"type": "number"
+								},
+								"visible": false,
+								"annotations": {
+									"ui.editable": false,
+									"ui.hidden": true,
+									"engine.hideFromParentSubgraph": true
+								}
+							},
+							{
+								"name": "index",
+								"value": 4,
+								"type": {
+									"$id": "https://schemas.tokens.studio/number.json",
+									"title": "Number",
+									"type": "number"
+								},
+								"visible": false,
+								"annotations": {
+									"ui.editable": false,
+									"engine.hideFromParentSubgraph": true
+								}
+							},
+							{
+								"name": "length",
+								"value": 5,
+								"type": {
+									"$id": "https://schemas.tokens.studio/number.json",
+									"title": "Number",
+									"type": "number"
+								},
+								"visible": false,
+								"annotations": {
+									"ui.editable": false,
+									"engine.hideFromParentSubgraph": true
+								}
+							},
+							{
+								"name": "finalTransparency",
+								"value": 0.11,
+								"type": {
+									"$id": "https://schemas.tokens.studio/number.json",
+									"title": "Number",
+									"type": "number"
+								},
+								"visible": false,
+								"annotations": { "ui.deletable": true }
+							},
+							{
+								"name": "transparencyCurve",
+								"value": {
+									"controlPoints": [
+										[
+											[0.14219337573716578, 0.7274187304710118],
+											[0.81242438670312, 0.3426880696053026]
+										]
+									],
+									"segments": [
+										[0, 0],
+										[1, 1]
+									]
+								},
+								"type": {
+									"$id": "https://schemas.tokens.studio/floatCurve.json",
+									"title": "Float curve",
+									"type": "object",
+									"default": {
+										"controlPoints": [
+											[
+												[0.25, 0.25],
+												[0.75, 0.75]
+											]
+										],
+										"segments": [
+											[0, 0],
+											[1, 1]
+										]
+									},
+									"properties": {
+										"segments": {
+											"type": "array",
+											"items": {
+												"type": "array",
+												"items": {
+													"type": "array",
+													"items": [{ "type": "number" }, { "type": "number" }]
+												}
+											}
+										},
+										"controlPoints": {
+											"type": "array",
+											"items": {
+												"type": "array",
+												"items": [{ "type": "number" }, { "type": "number" }]
+											}
+										}
+									}
+								},
+								"visible": false,
+								"annotations": { "ui.deletable": true }
+							},
+							{
+								"name": "horizontalDistance",
+								"value": 8,
+								"type": {
+									"$id": "https://schemas.tokens.studio/number.json",
+									"title": "Number",
+									"type": "number"
+								},
+								"visible": false,
+								"annotations": { "ui.deletable": true }
+							},
+							{
+								"name": "verticalDistance",
+								"value": 8,
+								"type": {
+									"$id": "https://schemas.tokens.studio/number.json",
+									"title": "Number",
+									"type": "number"
+								},
+								"visible": false,
+								"annotations": { "ui.deletable": true }
+							},
+							{
+								"name": "distanceCurve",
+								"value": {
+									"controlPoints": [
+										[
+											[0.17052797122027868, 0.6089303215977628],
+											[0.8822099930827179, 0.3961354099429192]
+										]
+									],
+									"segments": [
+										[0, 0],
+										[1, 1]
+									]
+								},
+								"type": {
+									"$id": "https://schemas.tokens.studio/floatCurve.json",
+									"title": "Float curve",
+									"type": "object",
+									"default": {
+										"controlPoints": [
+											[
+												[0.25, 0.25],
+												[0.75, 0.75]
+											]
+										],
+										"segments": [
+											[0, 0],
+											[1, 1]
+										]
+									},
+									"properties": {
+										"segments": {
+											"type": "array",
+											"items": {
+												"type": "array",
+												"items": {
+													"type": "array",
+													"items": [{ "type": "number" }, { "type": "number" }]
+												}
+											}
+										},
+										"controlPoints": {
+											"type": "array",
+											"items": {
+												"type": "array",
+												"items": [{ "type": "number" }, { "type": "number" }]
+											}
+										}
+									}
+								},
+								"visible": false,
+								"annotations": { "ui.deletable": true }
+							},
+							{
+								"name": "blur",
+								"value": 20,
+								"type": {
+									"$id": "https://schemas.tokens.studio/number.json",
+									"title": "Number",
+									"type": "number"
+								},
+								"visible": false,
+								"annotations": { "ui.deletable": true }
+							},
+							{
+								"name": "blurCurve",
+								"value": {
+									"controlPoints": [
+										[
+											[0.8627544900645381, 0.07411938476562502],
+											[1, 0.05392041015624993]
+										]
+									],
+									"segments": [
+										[0, 0],
+										[1, 1]
+									]
+								},
+								"type": {
+									"$id": "https://schemas.tokens.studio/floatCurve.json",
+									"title": "Float curve",
+									"type": "object",
+									"default": {
+										"controlPoints": [
+											[
+												[0.25, 0.25],
+												[0.75, 0.75]
+											]
+										],
+										"segments": [
+											[0, 0],
+											[1, 1]
+										]
+									},
+									"properties": {
+										"segments": {
+											"type": "array",
+											"items": {
+												"type": "array",
+												"items": {
+													"type": "array",
+													"items": [{ "type": "number" }, { "type": "number" }]
+												}
+											}
+										},
+										"controlPoints": {
+											"type": "array",
+											"items": {
+												"type": "array",
+												"items": [{ "type": "number" }, { "type": "number" }]
+											}
+										}
+									}
+								},
+								"visible": false,
+								"annotations": { "ui.deletable": true }
+							},
+							{
+								"name": "reduceSpread",
+								"value": 2,
+								"type": {
+									"$id": "https://schemas.tokens.studio/number.json",
+									"title": "Number",
+									"type": "number"
+								},
+								"visible": false,
+								"annotations": { "ui.deletable": true }
+							},
+							{
+								"name": "color",
+								"value": {
+									"space": "srgb",
+									"channels": [0.7215686274509804, 0, 0],
+									"alpha": 1
+								},
+								"type": {
+									"$id": "https://schemas.tokens.studio/color.json",
+									"title": "Color",
+									"type": "object",
+									"properties": {
+										"channels": {
+											"type": "array",
+											"items": {
+												"$id": "https://schemas.tokens.studio/number.json",
+												"title": "Number",
+												"type": "number"
+											}
+										},
+										"space": {
+											"$id": "https://schemas.tokens.studio/string.json",
+											"title": "String",
+											"type": "string"
+										},
+										"alpha": {
+											"$id": "https://schemas.tokens.studio/number.json",
+											"title": "Number",
+											"type": "number"
+										}
+									},
+									"default": { "channels": [0, 0, 0], "space": "srgb" },
+									"required": ["channels", "space"]
+								},
+								"visible": false,
+								"annotations": { "ui.deletable": true }
+							}
+						],
+						"annotations": {
+							"engine.singleton": true,
+							"engine.dynamicInputs": true,
+							"engine.deletable": false,
+							"ui.position.x": -220.66666666666669,
+							"ui.position.y": 41.33333333333334
+						}
+					},
+					{
+						"id": "74e08d59-feb7-42a1-987e-4c580747f725",
+						"type": "studio.tokens.generic.output",
+						"inputs": [
+							{
+								"name": "value",
+								"value": {
+									"x": "8",
+									"y": "0.1",
+									"blur": "20",
+									"spread": "-2",
+									"color": "hsl(0 100% 36.078% / 0.11)",
+									"type": "dropShadow"
+								},
+								"type": {
+									"type": "array",
+									"items": {
+										"$id": "https://schemas.tokens.studio/any.json",
+										"title": "Any"
+									}
+								},
+								"dynamicType": {
+									"$id": "https://schemas.tokens.studio/tokenBoxShadow.json",
+									"title": "Box Shadow Token",
+									"type": "object",
+									"properties": {
+										"x": {
+											"$id": "https://schemas.tokens.studio/string.json",
+											"title": "String",
+											"type": "string"
+										},
+										"y": {
+											"$id": "https://schemas.tokens.studio/string.json",
+											"title": "String",
+											"type": "string"
+										},
+										"blur": {
+											"$id": "https://schemas.tokens.studio/string.json",
+											"title": "String",
+											"type": "string"
+										},
+										"spread": {
+											"$id": "https://schemas.tokens.studio/string.json",
+											"title": "String",
+											"type": "string"
+										},
+										"type": {
+											"$id": "https://schemas.tokens.studio/string.json",
+											"title": "String",
+											"type": "string"
+										}
+									}
+								},
+								"annotations": { "ui.editable": false }
+							}
+						],
+						"annotations": {
+							"engine.singleton": true,
+							"engine.deletable": false,
+							"ui.position.x": 3221.5582649975045,
+							"ui.position.y": 187.97309108029617
+						}
+					},
+					{
+						"id": "5487309d-011e-4586-96bd-4e9f4846b0ef",
+						"type": "studio.tokens.curve.sampleFloat",
+						"inputs": [
+							{
+								"name": "curve",
+								"value": {
+									"controlPoints": [
+										[
+											[0.14219337573716578, 0.7274187304710118],
+											[0.81242438670312, 0.3426880696053026]
+										]
+									],
+									"segments": [
+										[0, 0],
+										[1, 1]
+									]
+								},
+								"type": {
+									"$id": "https://schemas.tokens.studio/floatCurve.json",
+									"title": "Float curve",
+									"type": "object",
+									"default": {
+										"controlPoints": [
+											[
+												[0.25, 0.25],
+												[0.75, 0.75]
+											]
+										],
+										"segments": [
+											[0, 0],
+											[1, 1]
+										]
+									},
+									"properties": {
+										"segments": {
+											"type": "array",
+											"items": {
+												"type": "array",
+												"items": {
+													"type": "array",
+													"items": [{ "type": "number" }, { "type": "number" }]
+												}
+											}
+										},
+										"controlPoints": {
+											"type": "array",
+											"items": {
+												"type": "array",
+												"items": [{ "type": "number" }, { "type": "number" }]
+											}
+										}
+									}
+								}
+							},
+							{
+								"name": "x",
+								"value": 1,
+								"type": {
+									"$id": "https://schemas.tokens.studio/number.json",
+									"title": "Number",
+									"type": "number",
+									"minimum": 0,
+									"maximum": 1,
+									"default": 0
+								}
+							}
+						],
+						"annotations": {
+							"xpos": 442.648681640625,
+							"ypos": -11.999998728434244,
+							"ui.position.x": 589.1610428070996,
+							"ui.position.y": -278.4090119107178
+						}
+					},
+					{
+						"id": "2f75505a-951e-4ed0-b312-5a1a3c579fc3",
+						"type": "studio.tokens.curve.sampleFloat",
+						"inputs": [
+							{
+								"name": "curve",
+								"value": {
+									"controlPoints": [
+										[
+											[0.17052797122027868, 0.6089303215977628],
+											[0.8822099930827179, 0.3961354099429192]
+										]
+									],
+									"segments": [
+										[0, 0],
+										[1, 1]
+									]
+								},
+								"type": {
+									"$id": "https://schemas.tokens.studio/floatCurve.json",
+									"title": "Float curve",
+									"type": "object",
+									"default": {
+										"controlPoints": [
+											[
+												[0.25, 0.25],
+												[0.75, 0.75]
+											]
+										],
+										"segments": [
+											[0, 0],
+											[1, 1]
+										]
+									},
+									"properties": {
+										"segments": {
+											"type": "array",
+											"items": {
+												"type": "array",
+												"items": {
+													"type": "array",
+													"items": [{ "type": "number" }, { "type": "number" }]
+												}
+											}
+										},
+										"controlPoints": {
+											"type": "array",
+											"items": {
+												"type": "array",
+												"items": [{ "type": "number" }, { "type": "number" }]
+											}
+										}
+									}
+								}
+							},
+							{
+								"name": "x",
+								"value": 1,
+								"type": {
+									"$id": "https://schemas.tokens.studio/number.json",
+									"title": "Number",
+									"type": "number",
+									"minimum": 0,
+									"maximum": 1,
+									"default": 0
+								}
+							}
+						],
+						"annotations": {
+							"xpos": 527.3153483072916,
+							"ypos": 247.33333460489908,
+							"ui.position.x": 567.3153483072915,
+							"ui.position.y": 200.6666679382324
+						}
+					},
+					{
+						"id": "b52df2df-ea97-4734-8300-b2c7d202c6f6",
+						"type": "studio.tokens.curve.sampleFloat",
+						"inputs": [
+							{
+								"name": "curve",
+								"value": {
+									"controlPoints": [
+										[
+											[0.8627544900645381, 0.07411938476562502],
+											[1, 0.05392041015624993]
+										]
+									],
+									"segments": [
+										[0, 0],
+										[1, 1]
+									]
+								},
+								"type": {
+									"$id": "https://schemas.tokens.studio/floatCurve.json",
+									"title": "Float curve",
+									"type": "object",
+									"default": {
+										"controlPoints": [
+											[
+												[0.25, 0.25],
+												[0.75, 0.75]
+											]
+										],
+										"segments": [
+											[0, 0],
+											[1, 1]
+										]
+									},
+									"properties": {
+										"segments": {
+											"type": "array",
+											"items": {
+												"type": "array",
+												"items": {
+													"type": "array",
+													"items": [{ "type": "number" }, { "type": "number" }]
+												}
+											}
+										},
+										"controlPoints": {
+											"type": "array",
+											"items": {
+												"type": "array",
+												"items": [{ "type": "number" }, { "type": "number" }]
+											}
+										}
+									}
+								}
+							},
+							{
+								"name": "x",
+								"value": 1,
+								"type": {
+									"$id": "https://schemas.tokens.studio/number.json",
+									"title": "Number",
+									"type": "number",
+									"minimum": 0,
+									"maximum": 1,
+									"default": 0
+								}
+							}
+						],
+						"annotations": {
+							"xpos": 553.3153483072916,
+							"ypos": 472.00000127156574,
+							"ui.position.x": 557.8268444628663,
+							"ui.position.y": 514.8390550935214
+						}
+					},
+					{
+						"id": "2dda05f1-037a-460e-ad6f-5da38201df00",
+						"type": "studio.tokens.generic.passthrough",
+						"inputs": [
+							{
+								"name": "value",
+								"value": 1,
+								"type": {
+									"$id": "https://schemas.tokens.studio/any.json",
+									"title": "Any"
+								},
+								"dynamicType": {
+									"$id": "https://schemas.tokens.studio/number.json",
+									"title": "Number",
+									"type": "number"
+								}
+							}
+						],
+						"annotations": {
+							"ui.nodeType": "studio.tokens.generic.passthrough",
+							"ui.position.x": 291.9820149739583,
+							"ui.position.y": 95.3333346048991
+						}
+					},
+					{
+						"id": "4308b66f-87fc-4042-a041-5e466c9c64b6",
+						"type": "studio.tokens.math.dataMapping",
+						"inputs": [
+							{
+								"name": "inputValue",
+								"value": 1,
+								"type": {
+									"$id": "https://schemas.tokens.studio/number.json",
+									"title": "Number",
+									"type": "number",
+									"default": 5
+								}
+							},
+							{
+								"name": "inputMin",
+								"value": 0,
+								"type": {
+									"$id": "https://schemas.tokens.studio/number.json",
+									"title": "Number",
+									"type": "number",
+									"default": 0
+								}
+							},
+							{
+								"name": "inputMax",
+								"value": 1,
+								"type": {
+									"$id": "https://schemas.tokens.studio/number.json",
+									"title": "Number",
+									"type": "number",
+									"default": 100
+								}
+							},
+							{
+								"name": "outputMin",
+								"value": 0,
+								"type": {
+									"$id": "https://schemas.tokens.studio/number.json",
+									"title": "Number",
+									"type": "number",
+									"default": 0
+								}
+							},
+							{
+								"name": "outputMax",
+								"value": 0.11,
+								"type": {
+									"$id": "https://schemas.tokens.studio/number.json",
+									"title": "Number",
+									"type": "number",
+									"default": 1
+								}
+							},
+							{
+								"name": "clamp",
+								"value": true,
+								"type": {
+									"$id": "https://schemas.tokens.studio/boolean.json",
+									"title": "Boolean",
+									"type": "boolean",
+									"default": true
+								}
+							}
+						],
+						"annotations": {
+							"xpos": 947.3153483072916,
+							"ypos": 8.000001271565756,
+							"ui.position.x": 1057.4710371782862,
+							"ui.position.y": -314.50738288261266
+						}
+					},
+					{
+						"id": "c16a6788-d13d-4eae-9178-217100d218ab",
+						"type": "studio.tokens.math.dataMapping",
+						"inputs": [
+							{
+								"name": "inputValue",
+								"value": 1,
+								"type": {
+									"$id": "https://schemas.tokens.studio/number.json",
+									"title": "Number",
+									"type": "number",
+									"default": 5
+								}
+							},
+							{
+								"name": "inputMin",
+								"value": 0,
+								"type": {
+									"$id": "https://schemas.tokens.studio/number.json",
+									"title": "Number",
+									"type": "number",
+									"default": 0
+								}
+							},
+							{
+								"name": "inputMax",
+								"value": 1,
+								"type": {
+									"$id": "https://schemas.tokens.studio/number.json",
+									"title": "Number",
+									"type": "number",
+									"default": 100
+								}
+							},
+							{
+								"name": "outputMin",
+								"value": 0,
+								"type": {
+									"$id": "https://schemas.tokens.studio/number.json",
+									"title": "Number",
+									"type": "number",
+									"default": 0
+								}
+							},
+							{
+								"name": "outputMax",
+								"value": 8,
+								"type": {
+									"$id": "https://schemas.tokens.studio/number.json",
+									"title": "Number",
+									"type": "number",
+									"default": 1
+								}
+							},
+							{
+								"name": "clamp",
+								"value": true,
+								"type": {
+									"$id": "https://schemas.tokens.studio/boolean.json",
+									"title": "Boolean",
+									"type": "boolean",
+									"default": true
+								}
+							}
+						],
+						"annotations": {
+							"xpos": 1135.6379758865478,
+							"ypos": 166.62821458505226,
+							"ui.position.x": 1058.4885810424078,
+							"ui.position.y": -15.396138875340455
+						}
+					},
+					{
+						"id": "b026c32c-e9ba-46c9-829d-077d56125962",
+						"type": "studio.tokens.math.dataMapping",
+						"inputs": [
+							{
+								"name": "inputValue",
+								"value": 1,
+								"type": {
+									"$id": "https://schemas.tokens.studio/number.json",
+									"title": "Number",
+									"type": "number",
+									"default": 5
+								}
+							},
+							{
+								"name": "inputMin",
+								"value": 0,
+								"type": {
+									"$id": "https://schemas.tokens.studio/number.json",
+									"title": "Number",
+									"type": "number",
+									"default": 0
+								}
+							},
+							{
+								"name": "inputMax",
+								"value": 100,
+								"type": {
+									"$id": "https://schemas.tokens.studio/number.json",
+									"title": "Number",
+									"type": "number",
+									"default": 100
+								}
+							},
+							{
+								"name": "outputMin",
+								"value": 0,
+								"type": {
+									"$id": "https://schemas.tokens.studio/number.json",
+									"title": "Number",
+									"type": "number",
+									"default": 0
+								}
+							},
+							{
+								"name": "outputMax",
+								"value": 8,
+								"type": {
+									"$id": "https://schemas.tokens.studio/number.json",
+									"title": "Number",
+									"type": "number",
+									"default": 1
+								}
+							},
+							{
+								"name": "clamp",
+								"value": true,
+								"type": {
+									"$id": "https://schemas.tokens.studio/boolean.json",
+									"title": "Boolean",
+									"type": "boolean",
+									"default": true
+								}
+							}
+						],
+						"annotations": {
+							"xpos": 1185.0618069585748,
+							"ypos": 367.93991675647993,
+							"ui.position.x": 1056.0776624535285,
+							"ui.position.y": 294.40689979565906
+						}
+					},
+					{
+						"id": "f0b19249-c392-45cc-b3c4-2345ed22948d",
+						"type": "studio.tokens.math.dataMapping",
+						"inputs": [
+							{
+								"name": "inputValue",
+								"value": 1,
+								"type": {
+									"$id": "https://schemas.tokens.studio/number.json",
+									"title": "Number",
+									"type": "number",
+									"default": 5
+								}
+							},
+							{
+								"name": "inputMin",
+								"value": 0,
+								"type": {
+									"$id": "https://schemas.tokens.studio/number.json",
+									"title": "Number",
+									"type": "number",
+									"default": 0
+								}
+							},
+							{
+								"name": "inputMax",
+								"value": 1,
+								"type": {
+									"$id": "https://schemas.tokens.studio/number.json",
+									"title": "Number",
+									"type": "number",
+									"default": 100
+								}
+							},
+							{
+								"name": "outputMin",
+								"value": 0,
+								"type": {
+									"$id": "https://schemas.tokens.studio/number.json",
+									"title": "Number",
+									"type": "number",
+									"default": 0
+								}
+							},
+							{
+								"name": "outputMax",
+								"value": 20,
+								"type": {
+									"$id": "https://schemas.tokens.studio/number.json",
+									"title": "Number",
+									"type": "number",
+									"default": 1
+								}
+							},
+							{
+								"name": "clamp",
+								"value": true,
+								"type": {
+									"$id": "https://schemas.tokens.studio/boolean.json",
+									"title": "Boolean",
+									"type": "boolean",
+									"default": true
+								}
+							}
+						],
+						"annotations": {
+							"xpos": 1154.9253245975829,
+							"ypos": 596.9771827000204,
+							"ui.position.x": 1056.0776624535285,
+							"ui.position.y": 598.1826419944601
+						}
+					},
+					{
+						"id": "764fd8d6-0206-4bd1-92c0-f520393d55a3",
+						"type": "studio.tokens.math.lerp",
+						"inputs": [
+							{
+								"name": "a",
+								"value": 0,
+								"type": {
+									"$id": "https://schemas.tokens.studio/number.json",
+									"title": "Number",
+									"type": "number",
+									"default": 0
+								}
+							},
+							{
+								"name": "b",
+								"value": -2,
+								"type": {
+									"$id": "https://schemas.tokens.studio/number.json",
+									"title": "Number",
+									"type": "number",
+									"default": 0
+								}
+							},
+							{
+								"name": "t",
+								"value": 1,
+								"type": {
+									"$id": "https://schemas.tokens.studio/number.json",
+									"title": "Number",
+									"type": "number",
+									"default": 0
+								}
+							}
+						],
+						"annotations": {
+							"xpos": 1071.7486332812443,
+							"ypos": 967.0531860930042,
+							"ui.position.x": 1053.666743864649,
+							"ui.position.y": 962.2313489152456
+						}
+					},
+					{
+						"id": "3f17b8b8-9eaf-4fc7-aba4-87a372bc8068",
+						"type": "studio.tokens.math.multiply",
+						"inputs": [
+							{
+								"name": "a",
+								"value": 2,
+								"type": {
+									"$id": "https://schemas.tokens.studio/number.json",
+									"title": "Number",
+									"type": "number"
+								}
+							},
+							{
+								"name": "b",
+								"value": -1,
+								"type": {
+									"$id": "https://schemas.tokens.studio/number.json",
+									"title": "Number",
+									"type": "number"
+								}
+							}
+						],
+						"annotations": {
+							"xpos": 617.2904792774825,
+							"ypos": 917.6293550209771,
+							"ui.position.x": 617.2904792774825,
+							"ui.position.y": 917.6293550209771
+						}
+					},
+					{
+						"id": "b8f3b6ec-f48d-4e3d-b413-ed9df98906bd",
+						"type": "studio.tokens.design.createBoxShadow",
+						"inputs": [
+							{
+								"name": "x",
+								"value": "8",
+								"type": {
+									"$id": "https://schemas.tokens.studio/string.json",
+									"title": "String",
+									"type": "string"
+								}
+							},
+							{
+								"name": "y",
+								"value": "0.1",
+								"type": {
+									"$id": "https://schemas.tokens.studio/string.json",
+									"title": "String",
+									"type": "string"
+								}
+							},
+							{
+								"name": "blur",
+								"value": "20",
+								"type": {
+									"$id": "https://schemas.tokens.studio/string.json",
+									"title": "String",
+									"type": "string"
+								}
+							},
+							{
+								"name": "spread",
+								"value": "-2",
+								"type": {
+									"$id": "https://schemas.tokens.studio/string.json",
+									"title": "String",
+									"type": "string"
+								}
+							},
+							{
+								"name": "color",
+								"value": "hsl(0 100% 36.078% / 0.11)",
+								"type": {
+									"$id": "https://schemas.tokens.studio/string.json",
+									"title": "String",
+									"type": "string"
+								}
+							},
+							{
+								"name": "type",
+								"value": "dropShadow",
+								"type": {
+									"$id": "https://schemas.tokens.studio/string.json",
+									"title": "String",
+									"type": "string"
+								}
+							}
+						],
+						"annotations": {
+							"xpos": 1978.2540226998892,
+							"ypos": 226.9011793070364,
+							"ui.position.x": 2787.1172092689194,
+							"ui.position.y": 182.29918541276794
+						}
+					},
+					{
+						"id": "02a399e7-eea0-4cc0-b868-88fb2d3d6036",
+						"type": "studio.tokens.color.colorToString",
+						"inputs": [
+							{
+								"name": "color",
+								"value": {
+									"space": "srgb",
+									"channels": [0.7215686274509804, 0, 0],
+									"alpha": 0.11
+								},
+								"type": {
+									"$id": "https://schemas.tokens.studio/color.json",
+									"title": "Color",
+									"type": "object",
+									"properties": {
+										"channels": {
+											"type": "array",
+											"items": {
+												"$id": "https://schemas.tokens.studio/number.json",
+												"title": "Number",
+												"type": "number"
+											}
+										},
+										"space": {
+											"$id": "https://schemas.tokens.studio/string.json",
+											"title": "String",
+											"type": "string"
+										},
+										"alpha": {
+											"$id": "https://schemas.tokens.studio/number.json",
+											"title": "Number",
+											"type": "number"
+										}
+									},
+									"default": { "space": "srgb", "channels": [0, 0, 0] },
+									"required": ["channels", "space"]
+								}
+							},
+							{
+								"name": "space",
+								"value": "hsl",
+								"type": {
+									"$id": "https://schemas.tokens.studio/string.json",
+									"title": "String",
+									"type": "string",
+									"enum": [
+										"hex",
+										"a98rgb",
+										"a98rgb-linear",
+										"acescc",
+										"acescg",
+										"cam16-jmh",
+										"hct",
+										"hpluv",
+										"hsl",
+										"hsluv",
+										"hsv",
+										"hwb",
+										"ictcp",
+										"jzczhz",
+										"jzazbz",
+										"lch",
+										"lchuv",
+										"lab",
+										"lab-d65",
+										"luv",
+										"oklch",
+										"oklab",
+										"p3",
+										"p3-linear",
+										"prophoto",
+										"prophoto-linear",
+										"rec2020",
+										"rec2020-linear",
+										"rec2100hlg",
+										"rec2100pq",
+										"xyz-abs-d65",
+										"xyz-d50",
+										"xyz-d65",
+										"xyz",
+										"srgb",
+										"srgb-linear"
+									],
+									"default": "hex"
+								},
+								"visible": false
+							}
+						],
+						"annotations": {
+							"xpos": 1903.5155464446286,
+							"ypos": 612.6481535277361,
+							"ui.position.x": 2056.6088768384693,
+							"ui.position.y": -439.71781051811047
+						}
+					},
+					{
+						"id": "ac97665c-d4cf-475d-9f56-1ac096223ba2",
+						"type": "studio.tokens.string.stringify",
+						"inputs": [
+							{
+								"name": "value",
+								"value": 8,
+								"type": {
+									"$id": "https://schemas.tokens.studio/any.json",
+									"title": "Any"
+								},
+								"dynamicType": {
+									"$id": "https://schemas.tokens.studio/number.json",
+									"title": "Number",
+									"type": "number"
+								}
+							}
+						],
+						"annotations": {
+							"xpos": 1605.7671007180259,
+							"ypos": 76.21876750207554,
+							"ui.position.x": 1643.1363388456564,
+							"ui.position.y": -14.190679580901019
+						}
+					},
+					{
+						"id": "67e3e464-063c-4e39-b379-d83b654ad69e",
+						"type": "studio.tokens.string.stringify",
+						"inputs": [
+							{
+								"name": "value",
+								"value": 0.1,
+								"type": {
+									"$id": "https://schemas.tokens.studio/any.json",
+									"title": "Any"
+								},
+								"dynamicType": {
+									"$id": "https://schemas.tokens.studio/number.json",
+									"title": "Number",
+									"type": "number"
+								}
+							}
+						],
+						"annotations": {
+							"xpos": 1553.9323510571194,
+							"ypos": 349.8580273398844,
+							"ui.position.x": 1651.5745539067339,
+							"ui.position.y": 314.89970780113356
+						}
+					},
+					{
+						"id": "6724cc7f-c073-40ea-83dc-b1387b03b410",
+						"type": "studio.tokens.typing.passUnit",
+						"inputs": [
+							{
+								"name": "value",
+								"value": "8",
+								"type": {
+									"$id": "https://schemas.tokens.studio/string.json",
+									"title": "String",
+									"type": "string"
+								}
+							},
+							{
+								"name": "fallback",
+								"value": "px",
+								"type": {
+									"$id": "https://schemas.tokens.studio/string.json",
+									"title": "String",
+									"type": "string",
+									"default": "px"
+								}
+							}
+						],
+						"annotations": {
+							"xpos": 1811.9006400672124,
+							"ypos": 7.507587719013392,
+							"ui.position.x": 1967.404889049932,
+							"ui.position.y": -17.807057464220065
+						}
+					},
+					{
+						"id": "e9d1ba3b-25d9-4a62-bc5d-56b4acdf155b",
+						"type": "studio.tokens.typing.passUnit",
+						"inputs": [
+							{
+								"name": "value",
+								"value": "0.1",
+								"type": {
+									"$id": "https://schemas.tokens.studio/string.json",
+									"title": "String",
+									"type": "string"
+								}
+							},
+							{
+								"name": "fallback",
+								"value": "px",
+								"type": {
+									"$id": "https://schemas.tokens.studio/string.json",
+									"title": "String",
+									"type": "string",
+									"default": "px"
+								}
+							}
+						],
+						"annotations": {
+							"xpos": 1809.489721478333,
+							"ypos": 469.1984974894134,
+							"ui.position.x": 1985.4867784665273,
+							"ui.position.y": 289.5850626179
+						}
+					},
+					{
+						"id": "b91d221e-d577-48c5-a918-99192a6d1f3d",
+						"type": "studio.tokens.color.create",
+						"inputs": [
+							{
+								"name": "space",
+								"value": "srgb",
+								"type": {
+									"$id": "https://schemas.tokens.studio/string.json",
+									"title": "String",
+									"type": "string",
+									"enum": [
+										"a98rgb",
+										"a98rgb-linear",
+										"acescc",
+										"acescg",
+										"cam16-jmh",
+										"hct",
+										"hpluv",
+										"hsl",
+										"hsluv",
+										"hsv",
+										"hwb",
+										"ictcp",
+										"jzczhz",
+										"jzazbz",
+										"lch",
+										"lchuv",
+										"lab",
+										"lab-d65",
+										"luv",
+										"oklch",
+										"oklab",
+										"p3",
+										"p3-linear",
+										"prophoto",
+										"prophoto-linear",
+										"rec2020",
+										"rec2020-linear",
+										"rec2100hlg",
+										"rec2100pq",
+										"xyz-abs-d65",
+										"xyz-d50",
+										"xyz-d65",
+										"xyz",
+										"srgb",
+										"srgb-linear"
+									],
+									"default": "srgb"
+								}
+							},
+							{
+								"name": "a",
+								"value": 0.7215686274509804,
+								"type": {
+									"$id": "https://schemas.tokens.studio/number.json",
+									"title": "Number",
+									"type": "number",
+									"default": "0"
+								}
+							},
+							{
+								"name": "b",
+								"value": 0,
+								"type": {
+									"$id": "https://schemas.tokens.studio/number.json",
+									"title": "Number",
+									"type": "number",
+									"default": "0"
+								}
+							},
+							{
+								"name": "c",
+								"value": 0,
+								"type": {
+									"$id": "https://schemas.tokens.studio/number.json",
+									"title": "Number",
+									"type": "number",
+									"default": "0"
+								}
+							},
+							{
+								"name": "alpha",
+								"value": 0.11,
+								"type": {
+									"$id": "https://schemas.tokens.studio/number.json",
+									"title": "Number",
+									"type": "number"
+								}
+							}
+						],
+						"annotations": {
+							"xpos": 2032.499690949675,
+							"ypos": -344.48652625737526,
+							"ui.position.x": 1682.9164955621657,
+							"ui.position.y": -660.3168614005731
+						}
+					},
+					{
+						"id": "97968a5a-3db3-473b-b190-d95de246a79f",
+						"type": "studio.tokens.color.deconstruct",
+						"inputs": [
+							{
+								"name": "color",
+								"value": {
+									"space": "srgb",
+									"channels": [0.7215686274509804, 0, 0],
+									"alpha": 1
+								},
+								"type": {
+									"$id": "https://schemas.tokens.studio/color.json",
+									"title": "Color",
+									"type": "object",
+									"properties": {
+										"channels": {
+											"type": "array",
+											"items": {
+												"$id": "https://schemas.tokens.studio/number.json",
+												"title": "Number",
+												"type": "number"
+											}
+										},
+										"space": {
+											"$id": "https://schemas.tokens.studio/string.json",
+											"title": "String",
+											"type": "string"
+										},
+										"alpha": {
+											"$id": "https://schemas.tokens.studio/number.json",
+											"title": "Number",
+											"type": "number"
+										}
+									},
+									"default": { "channels": [0, 0, 0], "space": "srgb" },
+									"required": ["channels", "space"]
+								}
+							}
+						],
+						"annotations": {
+							"xpos": 712.521763538218,
+							"ypos": -526.510879717768,
+							"ui.position.x": 589.56491550537,
+							"ui.position.y": -631.3858383340207
+						}
+					},
+					{
+						"id": "b5f61ef4-62c6-4c60-ba2f-e7fdfcbae835",
+						"type": "studio.tokens.string.stringify",
+						"inputs": [
+							{
+								"name": "value",
+								"value": 20,
+								"type": {
+									"$id": "https://schemas.tokens.studio/any.json",
+									"title": "Any"
+								},
+								"dynamicType": {
+									"$id": "https://schemas.tokens.studio/number.json",
+									"title": "Number",
+									"type": "number"
+								}
+							}
+						],
+						"annotations": {
+							"xpos": 1475.5774969185397,
+							"ypos": 662.0719845997631,
+							"ui.position.x": 1645.5472574345356,
+							"ui.position.y": 596.9771827000201
+						}
+					},
+					{
+						"id": "c40c042e-a542-4bb5-b577-80d2d447db4e",
+						"type": "studio.tokens.string.stringify",
+						"inputs": [
+							{
+								"name": "value",
+								"value": -2,
+								"type": {
+									"$id": "https://schemas.tokens.studio/any.json",
+									"title": "Any"
+								},
+								"dynamicType": {
+									"$id": "https://schemas.tokens.studio/number.json",
+									"title": "Number",
+									"type": "number"
+								}
+							}
+						],
+						"annotations": {
+							"xpos": 1535.8504616405241,
+							"ypos": 980.3132383318405,
+							"ui.position.x": 1658.8073096733722,
+							"ui.position.y": 944.1494594986499
+						}
+					},
+					{
+						"id": "a8f473f0-b522-4950-99e6-10774353eb1c",
+						"type": "studio.tokens.typing.passUnit",
+						"inputs": [
+							{
+								"name": "value",
+								"value": "20",
+								"type": {
+									"$id": "https://schemas.tokens.studio/string.json",
+									"title": "String",
+									"type": "string"
+								}
+							},
+							{
+								"name": "fallback",
+								"value": "px",
+								"type": {
+									"$id": "https://schemas.tokens.studio/string.json",
+									"title": "String",
+									"type": "string",
+									"default": "px"
+								}
+							}
+						],
+						"annotations": {
+							"xpos": 1829.9825294838076,
+							"ypos": 640.3737172998489,
+							"ui.position.x": 1984.2813191720877,
+							"ui.position.y": 594.5662641111408
+						}
+					},
+					{
+						"id": "3885e04e-89ce-4a1e-8096-d7e1b7b8c264",
+						"type": "studio.tokens.typing.passUnit",
+						"inputs": [
+							{
+								"name": "value",
+								"value": "-2",
+								"type": {
+									"$id": "https://schemas.tokens.studio/string.json",
+									"title": "String",
+									"type": "string"
+								}
+							},
+							{
+								"name": "fallback",
+								"value": "px",
+								"type": {
+									"$id": "https://schemas.tokens.studio/string.json",
+									"title": "String",
+									"type": "string",
+									"default": "px"
+								}
+							}
+						],
+						"annotations": {
+							"xpos": 1840.8316631337648,
+							"ypos": 980.3132383318405,
+							"ui.position.x": 1996.3359121164845,
+							"ui.position.y": 947.7658373819689
+						}
+					},
+					{
+						"id": "6310ca41-409c-41f4-baaf-cb0374025842",
+						"type": "studio.tokens.math.round",
+						"inputs": [
+							{
+								"name": "value",
+								"value": 8,
+								"type": {
+									"$id": "https://schemas.tokens.studio/number.json",
+									"title": "Number",
+									"type": "number",
+									"default": 0
+								}
+							},
+							{
+								"name": "precision",
+								"value": 1,
+								"type": {
+									"$id": "https://schemas.tokens.studio/number.json",
+									"title": "Number",
+									"type": "number",
+									"default": 0
+								}
+							}
+						],
+						"annotations": {
+							"xpos": 1397.2226427799599,
+							"ypos": 67.7805524409976,
+							"ui.position.x": 1340.5660559412947,
+							"ui.position.y": -11.779760992021721
+						}
+					},
+					{
+						"id": "6130d9f4-adad-4424-8878-f425dba0173b",
+						"type": "studio.tokens.math.round",
+						"inputs": [
+							{
+								"name": "value",
+								"value": 0.08,
+								"type": {
+									"$id": "https://schemas.tokens.studio/number.json",
+									"title": "Number",
+									"type": "number",
+									"default": 0
+								}
+							},
+							{
+								"name": "precision",
+								"value": 1,
+								"type": {
+									"$id": "https://schemas.tokens.studio/number.json",
+									"title": "Number",
+									"type": "number",
+									"default": 0
+								}
+							}
+						],
+						"annotations": {
+							"xpos": 1443.0300959686679,
+							"ypos": 339.0088936899271,
+							"ui.position.x": 1351.4151895912519,
+							"ui.position.y": 318.51608568445243
+						}
+					},
+					{
+						"id": "913ef632-19d9-493c-b1be-10e77f19cd56",
+						"type": "studio.tokens.math.round",
+						"inputs": [
+							{
+								"name": "value",
+								"value": 20,
+								"type": {
+									"$id": "https://schemas.tokens.studio/number.json",
+									"title": "Number",
+									"type": "number",
+									"default": 0
+								}
+							},
+							{
+								"name": "precision",
+								"value": 1,
+								"type": {
+									"$id": "https://schemas.tokens.studio/number.json",
+									"title": "Number",
+									"type": "number",
+									"default": 0
+								}
+							}
+						],
+						"annotations": {
+							"xpos": 1421.3318286687536,
+							"ypos": 628.3191243554519,
+							"ui.position.x": 1345.3878931190532,
+							"ui.position.y": 595.7717234055802
+						}
+					},
+					{
+						"id": "176f4789-42fb-4ba8-831a-7d49aedab6cf",
+						"type": "studio.tokens.math.round",
+						"inputs": [
+							{
+								"name": "value",
+								"value": -2,
+								"type": {
+									"$id": "https://schemas.tokens.studio/number.json",
+									"title": "Number",
+									"type": "number",
+									"default": 0
+								}
+							},
+							{
+								"name": "precision",
+								"value": 1,
+								"type": {
+									"$id": "https://schemas.tokens.studio/number.json",
+									"title": "Number",
+									"type": "number",
+									"default": 0
+								}
+							}
+						],
+						"annotations": {
+							"xpos": 1417.7154507854345,
+							"ypos": 958.6149710319261,
+							"ui.position.x": 1367.0861604189677,
+							"ui.position.y": 945.3549187930895
+						}
+					},
+					{
+						"id": "0a45843b-26f8-4466-8f1c-52d199088d97",
+						"type": "studio.tokens.math.round",
+						"inputs": [
+							{
+								"name": "value",
+								"value": 0.11,
+								"type": {
+									"$id": "https://schemas.tokens.studio/number.json",
+									"title": "Number",
+									"type": "number",
+									"default": 0
+								}
+							},
+							{
+								"name": "precision",
+								"value": 2,
+								"type": {
+									"$id": "https://schemas.tokens.studio/number.json",
+									"title": "Number",
+									"type": "number",
+									"default": 0
+								}
+							}
+						],
+						"annotations": {
+							"xpos": 1430.9755030242711,
+							"ypos": -369.8011714406087,
+							"ui.position.x": 1381.551671952244,
+							"ui.position.y": -405.96495027379933
+						}
+					}
+				],
+				"edges": [
+					{
+						"id": "c84a3c31-80f9-438b-9a69-809b625537c7",
+						"source": "063f5476-ca80-4609-b2db-fde8e87be84f",
+						"sourceHandle": "value",
+						"target": "2dda05f1-037a-460e-ad6f-5da38201df00",
+						"targetHandle": "value"
+					},
+					{
+						"id": "72a6c104-126c-4e18-a0d9-4ee5fe8ff412",
+						"source": "2dda05f1-037a-460e-ad6f-5da38201df00",
+						"sourceHandle": "value",
+						"target": "5487309d-011e-4586-96bd-4e9f4846b0ef",
+						"targetHandle": "x"
+					},
+					{
+						"id": "954f11c5-9294-4e00-aa5a-f79fc874e0d0",
+						"source": "2dda05f1-037a-460e-ad6f-5da38201df00",
+						"sourceHandle": "value",
+						"target": "2f75505a-951e-4ed0-b312-5a1a3c579fc3",
+						"targetHandle": "x"
+					},
+					{
+						"id": "8214be91-ea06-44fb-b781-703fff416262",
+						"source": "2dda05f1-037a-460e-ad6f-5da38201df00",
+						"sourceHandle": "value",
+						"target": "b52df2df-ea97-4734-8300-b2c7d202c6f6",
+						"targetHandle": "x"
+					},
+					{
+						"id": "5a8a3879-5040-413c-8bb2-f8e120a6b09e",
+						"source": "063f5476-ca80-4609-b2db-fde8e87be84f",
+						"sourceHandle": "transparencyCurve",
+						"target": "5487309d-011e-4586-96bd-4e9f4846b0ef",
+						"targetHandle": "curve"
+					},
+					{
+						"id": "d4e43d6b-b078-4234-a1e9-0ff0581013f2",
+						"source": "063f5476-ca80-4609-b2db-fde8e87be84f",
+						"sourceHandle": "distanceCurve",
+						"target": "2f75505a-951e-4ed0-b312-5a1a3c579fc3",
+						"targetHandle": "curve"
+					},
+					{
+						"id": "1cc948a2-e811-4863-9f37-539b1d1763eb",
+						"source": "063f5476-ca80-4609-b2db-fde8e87be84f",
+						"sourceHandle": "blurCurve",
+						"target": "b52df2df-ea97-4734-8300-b2c7d202c6f6",
+						"targetHandle": "curve"
+					},
+					{
+						"id": "0d63d070-27c9-4656-a704-745323cfa36b",
+						"source": "5487309d-011e-4586-96bd-4e9f4846b0ef",
+						"sourceHandle": "y",
+						"target": "4308b66f-87fc-4042-a041-5e466c9c64b6",
+						"targetHandle": "inputValue"
+					},
+					{
+						"id": "4f61a0dc-735e-4042-8b76-aec614f12d72",
+						"source": "063f5476-ca80-4609-b2db-fde8e87be84f",
+						"sourceHandle": "finalTransparency",
+						"target": "4308b66f-87fc-4042-a041-5e466c9c64b6",
+						"targetHandle": "outputMax"
+					},
+					{
+						"id": "d21751f5-9671-4202-be45-1ae0183a210f",
+						"source": "2f75505a-951e-4ed0-b312-5a1a3c579fc3",
+						"sourceHandle": "y",
+						"target": "c16a6788-d13d-4eae-9178-217100d218ab",
+						"targetHandle": "inputValue"
+					},
+					{
+						"id": "91c131df-4912-4c57-a1eb-243598af67aa",
+						"source": "063f5476-ca80-4609-b2db-fde8e87be84f",
+						"sourceHandle": "horizontalDistance",
+						"target": "c16a6788-d13d-4eae-9178-217100d218ab",
+						"targetHandle": "outputMax"
+					},
+					{
+						"id": "678dc4a8-2938-40e7-b3c6-e04962d14e13",
+						"source": "2f75505a-951e-4ed0-b312-5a1a3c579fc3",
+						"sourceHandle": "y",
+						"target": "b026c32c-e9ba-46c9-829d-077d56125962",
+						"targetHandle": "inputValue"
+					},
+					{
+						"id": "290dd078-24e7-4ef7-bf94-9f6058a055a2",
+						"source": "063f5476-ca80-4609-b2db-fde8e87be84f",
+						"sourceHandle": "verticalDistance",
+						"target": "b026c32c-e9ba-46c9-829d-077d56125962",
+						"targetHandle": "outputMax"
+					},
+					{
+						"id": "a3eb7be2-f343-4a38-b963-be17cbcb3429",
+						"source": "063f5476-ca80-4609-b2db-fde8e87be84f",
+						"sourceHandle": "blur",
+						"target": "f0b19249-c392-45cc-b3c4-2345ed22948d",
+						"targetHandle": "outputMax"
+					},
+					{
+						"id": "9c868e49-d1b2-4fd8-a486-8d865efc7f16",
+						"source": "b52df2df-ea97-4734-8300-b2c7d202c6f6",
+						"sourceHandle": "y",
+						"target": "f0b19249-c392-45cc-b3c4-2345ed22948d",
+						"targetHandle": "inputValue"
+					},
+					{
+						"id": "f762ae20-2936-4ed9-8476-d6291b2f64a0",
+						"source": "063f5476-ca80-4609-b2db-fde8e87be84f",
+						"sourceHandle": "value",
+						"target": "764fd8d6-0206-4bd1-92c0-f520393d55a3",
+						"targetHandle": "t"
+					},
+					{
+						"id": "1e379a71-98e5-4202-955b-b15715d86e0a",
+						"source": "063f5476-ca80-4609-b2db-fde8e87be84f",
+						"sourceHandle": "reduceSpread",
+						"target": "3f17b8b8-9eaf-4fc7-aba4-87a372bc8068",
+						"targetHandle": "a"
+					},
+					{
+						"id": "a7511bdd-7e2b-4b84-8ad9-1b90922a4056",
+						"source": "3f17b8b8-9eaf-4fc7-aba4-87a372bc8068",
+						"sourceHandle": "value",
+						"target": "764fd8d6-0206-4bd1-92c0-f520393d55a3",
+						"targetHandle": "b"
+					},
+					{
+						"id": "b8c17ef4-da5f-4061-a0bb-82a530503f11",
+						"source": "02a399e7-eea0-4cc0-b868-88fb2d3d6036",
+						"sourceHandle": "value",
+						"target": "b8f3b6ec-f48d-4e3d-b413-ed9df98906bd",
+						"targetHandle": "color"
+					},
+					{
+						"id": "9ff8cdf9-9507-4268-b691-24e4b4c635c8",
+						"source": "ac97665c-d4cf-475d-9f56-1ac096223ba2",
+						"sourceHandle": "value",
+						"target": "6724cc7f-c073-40ea-83dc-b1387b03b410",
+						"targetHandle": "value"
+					},
+					{
+						"id": "46cdd19d-3501-42c3-b250-043627734554",
+						"source": "67e3e464-063c-4e39-b379-d83b654ad69e",
+						"sourceHandle": "value",
+						"target": "e9d1ba3b-25d9-4a62-bc5d-56b4acdf155b",
+						"targetHandle": "value"
+					},
+					{
+						"id": "1ffd8770-ace9-4bb5-804c-0485f6d120fa",
+						"source": "063f5476-ca80-4609-b2db-fde8e87be84f",
+						"sourceHandle": "color",
+						"target": "97968a5a-3db3-473b-b190-d95de246a79f",
+						"targetHandle": "color"
+					},
+					{
+						"id": "1ce2e5d0-5c53-4370-a7c5-b2f0eb39360a",
+						"source": "97968a5a-3db3-473b-b190-d95de246a79f",
+						"sourceHandle": "space",
+						"target": "b91d221e-d577-48c5-a918-99192a6d1f3d",
+						"targetHandle": "space"
+					},
+					{
+						"id": "30c049f2-cebb-4956-885e-e17459745484",
+						"source": "97968a5a-3db3-473b-b190-d95de246a79f",
+						"sourceHandle": "a",
+						"target": "b91d221e-d577-48c5-a918-99192a6d1f3d",
+						"targetHandle": "a"
+					},
+					{
+						"id": "8e924bb1-b7b6-43e1-9970-3134f9f5f22a",
+						"source": "97968a5a-3db3-473b-b190-d95de246a79f",
+						"sourceHandle": "b",
+						"target": "b91d221e-d577-48c5-a918-99192a6d1f3d",
+						"targetHandle": "b"
+					},
+					{
+						"id": "3ad06e62-7966-4116-99a1-bdd9248af934",
+						"source": "97968a5a-3db3-473b-b190-d95de246a79f",
+						"sourceHandle": "c",
+						"target": "b91d221e-d577-48c5-a918-99192a6d1f3d",
+						"targetHandle": "c"
+					},
+					{
+						"id": "de168b8f-af97-486b-b648-9da1542ab857",
+						"source": "b5f61ef4-62c6-4c60-ba2f-e7fdfcbae835",
+						"sourceHandle": "value",
+						"target": "a8f473f0-b522-4950-99e6-10774353eb1c",
+						"targetHandle": "value"
+					},
+					{
+						"id": "f26504e4-5a77-493a-878a-51b303b69c86",
+						"source": "c40c042e-a542-4bb5-b577-80d2d447db4e",
+						"sourceHandle": "value",
+						"target": "3885e04e-89ce-4a1e-8096-d7e1b7b8c264",
+						"targetHandle": "value"
+					},
+					{
+						"id": "e0bafaa0-e425-494a-81c5-c8af459beab1",
+						"source": "b8f3b6ec-f48d-4e3d-b413-ed9df98906bd",
+						"sourceHandle": "value",
+						"target": "74e08d59-feb7-42a1-987e-4c580747f725",
+						"targetHandle": "value"
+					},
+					{
+						"id": "8a5b8efc-e9df-48e9-9c43-719e9c201454",
+						"source": "c16a6788-d13d-4eae-9178-217100d218ab",
+						"sourceHandle": "mappedValue",
+						"target": "6310ca41-409c-41f4-baaf-cb0374025842",
+						"targetHandle": "value"
+					},
+					{
+						"id": "c32a0856-9113-4e56-a755-3e516d01f77c",
+						"source": "6310ca41-409c-41f4-baaf-cb0374025842",
+						"sourceHandle": "value",
+						"target": "ac97665c-d4cf-475d-9f56-1ac096223ba2",
+						"targetHandle": "value"
+					},
+					{
+						"id": "b31cb2f6-9698-4d3b-8e63-bb16d01ba438",
+						"source": "b026c32c-e9ba-46c9-829d-077d56125962",
+						"sourceHandle": "mappedValue",
+						"target": "6130d9f4-adad-4424-8878-f425dba0173b",
+						"targetHandle": "value"
+					},
+					{
+						"id": "5eedb3c9-d3a1-4bce-ab4f-60502bbb6bcf",
+						"source": "6130d9f4-adad-4424-8878-f425dba0173b",
+						"sourceHandle": "value",
+						"target": "67e3e464-063c-4e39-b379-d83b654ad69e",
+						"targetHandle": "value"
+					},
+					{
+						"id": "6c2f12a2-c7bf-414c-8c41-c0e239642031",
+						"source": "f0b19249-c392-45cc-b3c4-2345ed22948d",
+						"sourceHandle": "mappedValue",
+						"target": "913ef632-19d9-493c-b1be-10e77f19cd56",
+						"targetHandle": "value"
+					},
+					{
+						"id": "90e7715e-aae1-4848-8cf3-28694b1cb906",
+						"source": "913ef632-19d9-493c-b1be-10e77f19cd56",
+						"sourceHandle": "value",
+						"target": "b5f61ef4-62c6-4c60-ba2f-e7fdfcbae835",
+						"targetHandle": "value"
+					},
+					{
+						"id": "a4f0cad9-2d55-4af1-b20c-b0806ca5e050",
+						"source": "764fd8d6-0206-4bd1-92c0-f520393d55a3",
+						"sourceHandle": "value",
+						"target": "176f4789-42fb-4ba8-831a-7d49aedab6cf",
+						"targetHandle": "value"
+					},
+					{
+						"id": "14119e35-e93e-4936-9188-d310c344f78d",
+						"source": "176f4789-42fb-4ba8-831a-7d49aedab6cf",
+						"sourceHandle": "value",
+						"target": "c40c042e-a542-4bb5-b577-80d2d447db4e",
+						"targetHandle": "value"
+					},
+					{
+						"id": "698b0c92-8f69-41c6-9677-61bede4d8ac5",
+						"source": "ac97665c-d4cf-475d-9f56-1ac096223ba2",
+						"sourceHandle": "value",
+						"target": "b8f3b6ec-f48d-4e3d-b413-ed9df98906bd",
+						"targetHandle": "x"
+					},
+					{
+						"id": "925fb64c-d549-499b-ad09-84983187064c",
+						"source": "67e3e464-063c-4e39-b379-d83b654ad69e",
+						"sourceHandle": "value",
+						"target": "b8f3b6ec-f48d-4e3d-b413-ed9df98906bd",
+						"targetHandle": "y"
+					},
+					{
+						"id": "78d0cd7f-70ef-4446-bd13-20581dcb65a8",
+						"source": "b5f61ef4-62c6-4c60-ba2f-e7fdfcbae835",
+						"sourceHandle": "value",
+						"target": "b8f3b6ec-f48d-4e3d-b413-ed9df98906bd",
+						"targetHandle": "blur"
+					},
+					{
+						"id": "844cbfc7-b8a2-47c6-a799-38d951dc0257",
+						"source": "c40c042e-a542-4bb5-b577-80d2d447db4e",
+						"sourceHandle": "value",
+						"target": "b8f3b6ec-f48d-4e3d-b413-ed9df98906bd",
+						"targetHandle": "spread"
+					},
+					{
+						"id": "625c5dd1-82a2-41ba-b680-2257351d5380",
+						"source": "4308b66f-87fc-4042-a041-5e466c9c64b6",
+						"sourceHandle": "mappedValue",
+						"target": "0a45843b-26f8-4466-8f1c-52d199088d97",
+						"targetHandle": "value"
+					},
+					{
+						"id": "245bf699-de9f-458a-acea-bd89022545c8",
+						"source": "0a45843b-26f8-4466-8f1c-52d199088d97",
+						"sourceHandle": "value",
+						"target": "b91d221e-d577-48c5-a918-99192a6d1f3d",
+						"targetHandle": "alpha"
+					},
+					{
+						"id": "ada57503-6af2-4547-acfc-27a5c211300b",
+						"source": "b91d221e-d577-48c5-a918-99192a6d1f3d",
+						"sourceHandle": "value",
+						"target": "02a399e7-eea0-4cc0-b868-88fb2d3d6036",
+						"targetHandle": "color"
+					}
+				],
+				"annotations": {
+					"engine.id": "cb60a496-0d56-403c-bdc4-775d270b0792",
+					"ui.viewports": [
+						null,
+						null,
+						null,
+						null,
+						null,
+						null,
+						null,
+						null,
+						null
+					],
+					"engine.capabilities.web-audio": "0.0.0",
+					"engine.capabilities.fs": "0.0.0",
+					"engine.version": "0.12.0"
+				}
+			}
+		},
+		{
+			"id": "94647d04-0cbe-4c7d-9316-93fecb8d9efa",
+			"type": "studio.tokens.generic.output",
+			"inputs": [
+				{
+					"name": "tokens",
+					"value": [
+						{
+							"x": "0",
+							"y": "0",
+							"blur": "0",
+							"spread": "0",
+							"color": "hsl(0 100% 36.078% / 0)",
+							"type": "dropShadow"
+						},
+						{
+							"x": "2.6",
+							"y": "0",
+							"blur": "1.1",
+							"spread": "-0.5",
+							"color": "hsl(0 100% 36.078% / 0.04)",
+							"type": "dropShadow"
+						},
+						{
+							"x": "4",
+							"y": "0",
+							"blur": "3.5",
+							"spread": "-1",
+							"color": "hsl(0 100% 36.078% / 0.06)",
+							"type": "dropShadow"
+						},
+						{
+							"x": "5.4",
+							"y": "0.1",
+							"blur": "9.1",
+							"spread": "-1.5",
+							"color": "hsl(0 100% 36.078% / 0.07)",
+							"type": "dropShadow"
+						},
+						{
+							"x": "8",
+							"y": "0.1",
+							"blur": "20",
+							"spread": "-2",
+							"color": "hsl(0 100% 36.078% / 0.11)",
+							"type": "dropShadow"
+						}
+					],
+					"type": {
+						"$id": "https://schemas.tokens.studio/any.json",
+						"title": "Any"
+					},
+					"dynamicType": {
+						"title": "Box Shadow Token",
+						"type": "array",
+						"items": {
+							"$id": "https://schemas.tokens.studio/tokenBoxShadow.json",
+							"title": "Box Shadow Token",
+							"type": "object",
+							"properties": {
+								"x": {
+									"$id": "https://schemas.tokens.studio/string.json",
+									"title": "String",
+									"type": "string"
+								},
+								"y": {
+									"$id": "https://schemas.tokens.studio/string.json",
+									"title": "String",
+									"type": "string"
+								},
+								"blur": {
+									"$id": "https://schemas.tokens.studio/string.json",
+									"title": "String",
+									"type": "string"
+								},
+								"spread": {
+									"$id": "https://schemas.tokens.studio/string.json",
+									"title": "String",
+									"type": "string"
+								},
+								"type": {
+									"$id": "https://schemas.tokens.studio/string.json",
+									"title": "String",
+									"type": "string"
+								}
+							}
+						}
+					},
+					"annotations": { "ui.deletable": true }
+				}
+			],
+			"annotations": {
+				"engine.singleton": true,
+				"engine.dynamicInputs": true,
+				"xpos": 2583.2903973414855,
+				"ypos": 565.3989406064055,
+				"ui.position.x": 1350.6084987559905,
+				"ui.position.y": 432.4138203887596
+			}
+		}
+	],
+	"edges": [
+		{
+			"id": "f7f01cd1-bfb2-451f-bdb5-bd76a3c7a799",
+			"source": "acc83d6c-bb42-45a0-9574-944fc6a18916",
+			"sourceHandle": "layers",
+			"target": "b5a484f5-1e3b-4a11-9530-680f6d8e0dde",
+			"targetHandle": "length"
+		},
+		{
+			"id": "b7b37ddb-7231-489c-8107-64a2ee6b73b4",
+			"source": "b5a484f5-1e3b-4a11-9530-680f6d8e0dde",
+			"sourceHandle": "array",
+			"target": "be3cbc58-94c8-4fd9-b3c6-fdc5e2ed1020",
+			"targetHandle": "array"
+		},
+		{
+			"id": "80a33ddd-8957-406f-8f04-083e1a84777d",
+			"source": "acc83d6c-bb42-45a0-9574-944fc6a18916",
+			"sourceHandle": "finalTransparency",
+			"target": "be3cbc58-94c8-4fd9-b3c6-fdc5e2ed1020",
+			"targetHandle": "finalTransparency"
+		},
+		{
+			"id": "de39957c-e63f-4f01-88e4-7d177410b0cb",
+			"source": "acc83d6c-bb42-45a0-9574-944fc6a18916",
+			"sourceHandle": "transparencyCurve",
+			"target": "be3cbc58-94c8-4fd9-b3c6-fdc5e2ed1020",
+			"targetHandle": "transparencyCurve"
+		},
+		{
+			"id": "c3a39c25-0355-449a-a687-6c2e7b3405d7",
+			"source": "acc83d6c-bb42-45a0-9574-944fc6a18916",
+			"sourceHandle": "horizontalDistance",
+			"target": "be3cbc58-94c8-4fd9-b3c6-fdc5e2ed1020",
+			"targetHandle": "horizontalDistance"
+		},
+		{
+			"id": "fce77eaa-a1d1-4c8f-a2fb-4bf3c206e0ea",
+			"source": "acc83d6c-bb42-45a0-9574-944fc6a18916",
+			"sourceHandle": "verticalDistance",
+			"target": "be3cbc58-94c8-4fd9-b3c6-fdc5e2ed1020",
+			"targetHandle": "verticalDistance"
+		},
+		{
+			"id": "14b87b10-c47f-47be-ad93-16c9017e1ae4",
+			"source": "acc83d6c-bb42-45a0-9574-944fc6a18916",
+			"sourceHandle": "distanceCurve",
+			"target": "be3cbc58-94c8-4fd9-b3c6-fdc5e2ed1020",
+			"targetHandle": "distanceCurve"
+		},
+		{
+			"id": "e3a9fc6b-023c-453f-a492-2048e25286a8",
+			"source": "acc83d6c-bb42-45a0-9574-944fc6a18916",
+			"sourceHandle": "blur",
+			"target": "be3cbc58-94c8-4fd9-b3c6-fdc5e2ed1020",
+			"targetHandle": "blur"
+		},
+		{
+			"id": "ca41f137-e2f5-425b-bc44-0ca82b634663",
+			"source": "acc83d6c-bb42-45a0-9574-944fc6a18916",
+			"sourceHandle": "blurCurve",
+			"target": "be3cbc58-94c8-4fd9-b3c6-fdc5e2ed1020",
+			"targetHandle": "blurCurve"
+		},
+		{
+			"id": "3ed28d7b-a3a8-4f60-9bb0-820394dc74cb",
+			"source": "acc83d6c-bb42-45a0-9574-944fc6a18916",
+			"sourceHandle": "reduceSpread",
+			"target": "be3cbc58-94c8-4fd9-b3c6-fdc5e2ed1020",
+			"targetHandle": "reduceSpread"
+		},
+		{
+			"id": "f64803b4-238c-4d4d-84f5-3912bc61c9b6",
+			"source": "acc83d6c-bb42-45a0-9574-944fc6a18916",
+			"sourceHandle": "color",
+			"target": "be3cbc58-94c8-4fd9-b3c6-fdc5e2ed1020",
+			"targetHandle": "color"
+		},
+		{
+			"id": "5bb76efd-f840-46c4-94c6-70c4340c2192",
+			"source": "be3cbc58-94c8-4fd9-b3c6-fdc5e2ed1020",
+			"sourceHandle": "value",
+			"target": "94647d04-0cbe-4c7d-9316-93fecb8d9efa",
+			"targetHandle": "tokens"
+		}
+	],
+	"annotations": {
+		"engine.id": "67114c77-244d-4c48-9087-634bfd37782b",
+		"engine.version": "0.12.0",
+		"ui.viewports": [null, null, null, null, null, null, null, null, null],
+		"ui.viewport": {
+			"x": -537.6583873800437,
+			"y": -93.3409458248409,
+			"zoom": 0.75
+		},
+		"ui.version": "4.3.9"
+	}
+}
diff --git a/packages/ui/src/data/layout/default.json b/packages/ui/src/data/layout/default.json
new file mode 100644
index 000000000..26bbd6bc3
--- /dev/null
+++ b/packages/ui/src/data/layout/default.json
@@ -0,0 +1,84 @@
+{
+	"dockbox": {
+		"id": "+18",
+		"size": 200,
+		"mode": "horizontal",
+		"children": [
+			{
+				"id": "+22",
+				"size": 0.25,
+				"tabs": [
+					{
+						"id": "dropPanel"
+					},
+					{
+						"id": "previewNodesPanel"
+					},
+					{
+						"id": "marketplace"
+					}
+				],
+				"group": "popout",
+				"activeId": "dropPanel"
+			},
+			{
+				"id": "graphs",
+				"size": 1.4166666666666665,
+				"tabs": [
+					{
+						"id": "graph1"
+					}
+				],
+				"group": "graph",
+				"activeId": "graph1"
+			},
+			{
+				"id": "+24",
+				"size": 0.3333333333333333,
+				"mode": "vertical",
+				"children": [
+					{
+						"id": "+25",
+						"size": 12,
+						"tabs": [
+							{
+								"id": "input"
+							}
+						],
+						"group": "popout",
+						"activeId": "input"
+					},
+					{
+						"id": "+26",
+						"size": 12,
+						"tabs": [
+							{
+								"id": "outputs"
+							}
+						],
+						"group": "popout",
+						"activeId": "outputs"
+					}
+				]
+			}
+		]
+	},
+	"floatbox": {
+		"id": "+30",
+		"size": 1,
+		"mode": "float",
+		"children": []
+	},
+	"windowbox": {
+		"id": "+31",
+		"size": 1,
+		"mode": "window",
+		"children": []
+	},
+	"maxbox": {
+		"id": "+32",
+		"size": 1,
+		"mode": "maximize",
+		"children": []
+	}
+}
diff --git a/yarn.lock b/yarn.lock
index d2142f22f..ecc662c83 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3131,18 +3131,6 @@
   resolved "https://registry.yarnpkg.com/@interactjs/types/-/types-1.10.27.tgz#10afd71cef2498e2b5192cf0d46f937d8ceb767f"
   integrity sha512-BUdv0cvs4H5ODuwft2Xp4eL8Vmi3LcihK42z0Ft/FbVJZoRioBsxH+LlsBdK4tAie7PqlKGy+1oyOncu1nQ6eA==
 
-"@isaacs/cliui@^8.0.2":
-  version "8.0.2"
-  resolved "https://registry.yarnpkg.com/@isaacs/cliui/-/cliui-8.0.2.tgz#b37667b7bc181c168782259bab42474fbf52b550"
-  integrity sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==
-  dependencies:
-    string-width "^5.1.2"
-    string-width-cjs "npm:string-width@^4.2.0"
-    strip-ansi "^7.0.1"
-    strip-ansi-cjs "npm:strip-ansi@^6.0.1"
-    wrap-ansi "^8.1.0"
-    wrap-ansi-cjs "npm:wrap-ansi@^7.0.0"
-
 "@istanbuljs/schema@^0.1.2", "@istanbuljs/schema@^0.1.3":
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/@istanbuljs/schema/-/schema-0.1.3.tgz#e45e384e4b8ec16bce2fd903af78450f6bf7ec98"
@@ -12521,6 +12509,14 @@ handlebars@^4.7.7:
   optionalDependencies:
     uglify-js "^3.1.4"
 
+happy-dom@^16.3.0:
+  version "16.3.0"
+  resolved "https://registry.yarnpkg.com/happy-dom/-/happy-dom-16.3.0.tgz#e138b5692cdff8e1e25d02b7730d320b4a151f65"
+  integrity sha512-Q71RaIhyS21vhW17Tpa5W36yqQXIlE1TZ0A0Gguts8PShUSQE/7fBgxYGxgm3+5y0gF6afdlAVHLQqgrIcfRzg==
+  dependencies:
+    webidl-conversions "^7.0.0"
+    whatwg-mimetype "^3.0.0"
+
 hard-rejection@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/hard-rejection/-/hard-rejection-2.1.0.tgz#1c6eda5c1685c63942766d79bb40ae773cecd883"
@@ -13843,22 +13839,15 @@ itty-router@^5.0.9:
   resolved "https://registry.yarnpkg.com/itty-router/-/itty-router-5.0.17.tgz#e5a015756bfc420ea20f09da80935a7feb8c4ef8"
   integrity sha512-ZHnPI0OOyTTLuNp2FdciejYaK4Wl3ZV3O0yEm8njOGggh/k/ek3BL7X2I5YsCOfc5vLhIJgj3Z4pUtLs6k9Ucg==
 
-jackspeak@^3.1.2:
-  version "3.4.3"
-  resolved "https://registry.yarnpkg.com/jackspeak/-/jackspeak-3.4.3.tgz#8833a9d89ab4acde6188942bd1c53b6390ed5a8a"
-  integrity sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==
+jackspeak@2.1.1, jackspeak@^3.1.2, jackspeak@^4.0.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/jackspeak/-/jackspeak-2.1.1.tgz#2a42db4cfbb7e55433c28b6f75d8b796af9669cd"
+  integrity sha512-juf9stUEwUaILepraGOWIJTLwg48bUnBmRqd2ln2Os1sW987zeoj/hzhbvRB95oMuS2ZTpjULmdwHNX4rzZIZw==
   dependencies:
-    "@isaacs/cliui" "^8.0.2"
+    cliui "^8.0.1"
   optionalDependencies:
     "@pkgjs/parseargs" "^0.11.0"
 
-jackspeak@^4.0.1:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/jackspeak/-/jackspeak-4.0.2.tgz#11f9468a3730c6ff6f56823a820d7e3be9bef015"
-  integrity sha512-bZsjR/iRjl1Nk1UkjGpAzLNfQtzuijhn2g+pbZb98HQ1Gk8vM9hfbxeMBP+M2/UUdwj0RqGG3mlvk2MsAqwvEw==
-  dependencies:
-    "@isaacs/cliui" "^8.0.2"
-
 jake@^10.8.5:
   version "10.9.1"
   resolved "https://registry.yarnpkg.com/jake/-/jake-10.9.1.tgz#8dc96b7fcc41cb19aa502af506da4e1d56f5e62b"
@@ -18630,13 +18619,6 @@ react-element-to-jsx-string@^15.0.0:
     is-plain-object "5.0.0"
     react-is "18.1.0"
 
-react-error-boundary@4.0.11:
-  version "4.0.11"
-  resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-4.0.11.tgz#36bf44de7746714725a814630282fee83a7c9a1c"
-  integrity sha512-U13ul67aP5DOSPNSCWQ/eO0AQEYzEFkVljULQIjMV0KlffTAhxuDoBKdO0pb/JZ8mDhMKFZ9NZi0BmLGUiNphw==
-  dependencies:
-    "@babel/runtime" "^7.12.5"
-
 react-error-boundary@^4.0.13:
   version "4.0.13"
   resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-4.0.13.tgz#80386b7b27b1131c5fbb7368b8c0d983354c7947"
@@ -19585,14 +19567,7 @@ responselike@^3.0.0:
   dependencies:
     lowercase-keys "^3.0.0"
 
-resq@1.10.2:
-  version "1.10.2"
-  resolved "https://registry.yarnpkg.com/resq/-/resq-1.10.2.tgz#cedf4f20d53f6e574b1e12afbda446ad9576c193"
-  integrity sha512-HmgVS3j+FLrEDBTDYysPdPVF9/hioDMJ/otOiQDKqk77YfZeeLOj0qi34yObumcud1gBpk+wpBTEg4kMicD++A==
-  dependencies:
-    fast-deep-equal "^2.0.1"
-
-resq@^1.11.0:
+resq@1.10.2, resq@^1.11.0:
   version "1.11.0"
   resolved "https://registry.yarnpkg.com/resq/-/resq-1.11.0.tgz#edec8c58be9af800fd628118c0ca8815283de196"
   integrity sha512-G10EBz+zAAy3zUd/CDoBbXRL6ia9kOo3xRHrMDsHljI0GDkhYlyjwoCx5+3eCC4swi1uCoZQhskuJkj7Gp57Bw==
@@ -20588,15 +20563,6 @@ string-to-arraybuffer@^1.0.0:
     atob-lite "^2.0.0"
     is-base64 "^0.1.0"
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
 string-width@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
@@ -20720,13 +20686,6 @@ stringify-object@^3.3.0:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
 strip-ansi@^3.0.0, strip-ansi@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"
@@ -22256,6 +22215,11 @@ webidl-conversions@^4.0.2:
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
   integrity sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==
 
+webidl-conversions@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-7.0.0.tgz#256b4e1882be7debbf01d05f0aa2039778ea080a"
+  integrity sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==
+
 webpack-bundle-analyzer@4.10.1:
   version "4.10.1"
   resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.10.1.tgz#84b7473b630a7b8c21c741f81d8fe4593208b454"
@@ -22425,6 +22389,11 @@ websocket@^1.0.8, websocket@~1.0.22:
     utf-8-validate "^5.0.2"
     yaeti "^0.0.6"
 
+whatwg-mimetype@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz#5fa1a7623867ff1af6ca3dc72ad6b8a4208beba7"
+  integrity sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==
+
 whatwg-url@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d"
@@ -22559,15 +22528,6 @@ workerpool@^6.5.1:
   resolved "https://registry.yarnpkg.com/workerpool/-/workerpool-6.5.1.tgz#060f73b39d0caf97c6db64da004cd01b4c099544"
   integrity sha512-Fs4dNYcsdpYSAfVxhnl1L5zTksjvOJxtC5hzMNl+1t9B8hTJTdKDyZ5ju7ztgPy+ft9tBFXoOlDNiOT9WUXZlA==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^6.2.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz#e9393ba07102e6c91a3b221478f0257cd2856e53"

From 98200e02980bd7ea8df3068877cea2883c57af1e Mon Sep 17 00:00:00 2001
From: SorsOps <80043879+sorsOps@users.noreply.github.com>
Date: Wed, 15 Jan 2025 21:42:01 +0200
Subject: [PATCH 02/10] Fix rebase issues

---
 .../src/ui/controls/token.tsx                 |  4 +-
 .../src/ui/controls/tokenArray.tsx            |  8 +-
 packages/ui/src/components/editor/index.tsx   | 25 +-----
 packages/ui/src/components/editor/layout.ts   | 80 -------------------
 4 files changed, 9 insertions(+), 108 deletions(-)
 delete mode 100644 packages/ui/src/components/editor/layout.ts

diff --git a/packages/nodes-design-tokens/src/ui/controls/token.tsx b/packages/nodes-design-tokens/src/ui/controls/token.tsx
index 992f413af..43ab3d3c3 100644
--- a/packages/nodes-design-tokens/src/ui/controls/token.tsx
+++ b/packages/nodes-design-tokens/src/ui/controls/token.tsx
@@ -1,7 +1,7 @@
 import { IField } from '@tokens-studio/graph-editor';
 import { PreviewColor } from './preview/color.js';
+import { SingleToken, TokenTypes } from '@tokens-studio/types';
 import { Stack } from '@tokens-studio/ui';
-import { TokenTypes } from '@tokens-studio/types';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
 
@@ -16,7 +16,7 @@ export const getPreview = tokenData => {
 
 type PreviewProps = {
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	token: any;
+	token: SingleToken;
 	hideName?: boolean;
 };
 
diff --git a/packages/nodes-design-tokens/src/ui/controls/tokenArray.tsx b/packages/nodes-design-tokens/src/ui/controls/tokenArray.tsx
index e7452d227..49d534d5d 100644
--- a/packages/nodes-design-tokens/src/ui/controls/tokenArray.tsx
+++ b/packages/nodes-design-tokens/src/ui/controls/tokenArray.tsx
@@ -1,5 +1,5 @@
 import { Accordion, Button, Separator, Stack } from '@tokens-studio/ui';
-import { IField, flatTokensRestoreToMap } from '@tokens-studio/graph-editor';
+import { IField, IResolvedToken, flatTokensRestoreToMap } from '@tokens-studio/graph-editor';
 import { Token } from './token.js';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
@@ -8,7 +8,11 @@ export const TokenArrayField = ({ port }: IField) => {
 	return <TokenArrayFieldInner value={port.value} />;
 };
 
-export const TokenArrayFieldInner = observer(({ value }) => {
+interface TokenArrayFieldInnerProps {
+	value: IResolvedToken[];
+}
+
+export const TokenArrayFieldInner = observer(({ value }: TokenArrayFieldInnerProps) => {
 	const downloadTokens = () => {
 		const element = document.createElement('a');
 		const asObj = flatTokensRestoreToMap(value);
diff --git a/packages/ui/src/components/editor/index.tsx b/packages/ui/src/components/editor/index.tsx
index 6e1f23af9..fbad68143 100644
--- a/packages/ui/src/components/editor/index.tsx
+++ b/packages/ui/src/components/editor/index.tsx
@@ -1,8 +1,7 @@
 'use client';
 
-import { DropPanelInner, Editor } from '@tokens-studio/graph-editor';
+import { Editor } from '@tokens-studio/graph-editor';
 import { EmptyStateEditor } from '../EmptyStateEditor.tsx';
-import { ErrorBoundary } from 'react-error-boundary';
 import { ExamplesPicker } from '../ExamplesPicker.tsx';
 import {
 	capabilities,
@@ -11,10 +10,8 @@ import {
 	menu,
 	nodeTypes,
 	panelItems,
-	previewItems,
 	specifics
 } from './data.tsx';
-import { defaultLayout } from './layout.ts';
 import { loadCompounds } from '@/data/compounds/index.tsx';
 import { observer } from 'mobx-react-lite';
 import { tabLoader } from './tabLoader.tsx';
@@ -26,25 +23,7 @@ import initialLayout from '@/data/layout/default.json';
 import styles from './styles.module.css';
 import type { LayoutBase } from 'rc-dock';
 import type { ReactElement } from 'react';
-import type { TabBase, TabData } from 'rc-dock';
 
-const tabLoader = (tab: TabBase): TabData | undefined => {
-	const { id } = tab;
-	switch (id) {
-		case 'previewNodesPanel':
-			return {
-				group: 'popout',
-				id: 'previewNodesPanel',
-				title: 'Preview',
-				content: (
-					<ErrorBoundary fallback={<div />}>
-						<DropPanelInner data={previewItems} />
-					</ErrorBoundary>
-				),
-				closable: true
-			};
-	}
-};
 
 export const EditorTab = observer(
 	(
@@ -78,8 +57,6 @@ export const EditorTab = observer(
 					capabilities={capabilities}
 					tabLoader={tabLoader}
 					controls={controls}
-					initialLayout={defaultLayout}
-					tabLoader={tabLoader}
 					specifics={specifics}
 					icons={icons}
 					toolbarButtons={toolbarButtons}
diff --git a/packages/ui/src/components/editor/layout.ts b/packages/ui/src/components/editor/layout.ts
deleted file mode 100644
index cbeca686f..000000000
--- a/packages/ui/src/components/editor/layout.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-import type { LayoutBase } from 'rc-dock';
-
-export const defaultLayout: LayoutBase = {
-	dockbox: {
-		mode: 'vertical',
-		children: [
-			{
-				mode: 'horizontal',
-				children: [
-					{
-						size: 2,
-						mode: 'vertical',
-						children: [
-							{
-								mode: 'horizontal',
-								children: [
-									{
-										size: 3,
-										mode: 'vertical',
-										children: [
-											{
-												tabs: [
-													{
-														id: 'dropPanel'
-													},
-													{
-														id: 'previewNodesPanel'
-													}
-												]
-											}
-										]
-									},
-									{
-										size: 17,
-										mode: 'vertical',
-										children: [
-											{
-												id: 'graphs',
-												size: 700,
-												group: 'graph',
-												tabs: [
-													{
-														id: 'graph1'
-													}
-												]
-											}
-										]
-									},
-
-									{
-										size: 4,
-										mode: 'vertical',
-										children: [
-											{
-												size: 12,
-												tabs: [
-													{
-														id: 'input'
-													}
-												]
-											},
-											{
-												size: 12,
-												tabs: [
-													{
-														id: 'outputs'
-													}
-												]
-											}
-										]
-									}
-								]
-							}
-						]
-					}
-				]
-			}
-		]
-	}
-};

From a2e571b746663e68bd8044df15577c174bf87d91 Mon Sep 17 00:00:00 2001
From: SorsOps <80043879+sorsOps@users.noreply.github.com>
Date: Tue, 21 Jan 2025 11:16:58 +0200
Subject: [PATCH 03/10] Start implementing systems and frames

---
 packages/graph-editor/readme.md               |   4 +
 .../contextMenus/paneContextMenu.tsx          |  17 +-
 .../src/components/controls/array.tsx         |  19 +-
 .../src/components/controls/color.tsx         |  11 +-
 .../src/components/controls/curve.tsx         |  38 +-
 .../src/components/controls/interface.tsx     |   2 +
 .../src/components/controls/numeric.tsx       |  12 +-
 .../src/components/controls/slider.tsx        |  12 +-
 .../src/components/controls/string.tsx        |   9 +-
 .../src/components/controls/text.tsx          |  10 +-
 .../src/components/dialogs/findDialog.tsx     |  15 +-
 .../src/components/flow/edges/edge.tsx        | 185 +++++-----
 .../components/flow/nodes/passthroughNode.tsx |   7 +-
 .../src/components/flow/wrapper/nodeV2.tsx    | 100 ++++--
 .../src/components/hotKeys/index.tsx          |  26 +-
 .../components/panels/dropPanel/dropPanel.tsx |   7 +-
 .../panels/inputs/dynamicInputs.tsx           |   2 -
 .../src/components/panels/inputs/index.tsx    |  53 +--
 .../src/components/panels/legend/index.tsx    |   7 +-
 .../src/components/panels/output/index.tsx    |  44 +--
 .../panels/output/styles.module.css           |  10 +
 .../src/components/panels/settings/index.tsx  | 329 +++++++++---------
 .../src/components/panels/unified/index.tsx   |  59 ++++
 .../panels/unified/styles.module.css          |  14 +
 .../src/components/portPanel/index.tsx        |  27 +-
 .../src/components/toolbar/dropdowns/add.tsx  |   9 +-
 .../src/components/toolbar/toolbar.tsx        |   9 +-
 .../graph-editor/src/editor/editorTypes.ts    |  44 +--
 packages/graph-editor/src/editor/graph.tsx    |  59 ++--
 .../src/editor/hooks/useAutolayout.ts         |  14 +-
 packages/graph-editor/src/editor/index.tsx    |  34 +-
 .../src/editor/layoutController.tsx           |  53 +--
 packages/graph-editor/src/index.tsx           |   2 +
 packages/graph-editor/src/redux/index.tsx     |  43 +--
 .../graph-editor/src/redux/models/index.ts    |   2 -
 .../graph-editor/src/redux/models/registry.ts |  62 +---
 .../graph-editor/src/redux/models/root.ts     |   2 -
 .../graph-editor/src/redux/models/settings.ts | 133 -------
 .../graph-editor/src/redux/selectors/index.ts |   1 -
 .../src/redux/selectors/registry.ts           |  22 --
 .../graph-editor/src/redux/selectors/roots.ts |   1 -
 .../src/redux/selectors/settings.ts           |  42 ---
 packages/graph-editor/src/redux/store.tsx     |   2 -
 packages/graph-editor/src/registry/icon.tsx   |   2 +-
 packages/graph-editor/src/system/hook.tsx     |   8 +
 packages/graph-editor/src/system/index.tsx    |  98 ++++++
 packages/graph-editor/src/system/settings.tsx |  91 +++++
 .../src/ui/controls/tokenArray.tsx            |  80 +++--
 packages/ui/src/components/editor/index.tsx   |  31 +-
 packages/ui/src/data/layout/default.json      |  15 +-
 50 files changed, 869 insertions(+), 1009 deletions(-)
 create mode 100644 packages/graph-editor/src/components/panels/output/styles.module.css
 create mode 100644 packages/graph-editor/src/components/panels/unified/index.tsx
 create mode 100644 packages/graph-editor/src/components/panels/unified/styles.module.css
 delete mode 100644 packages/graph-editor/src/redux/models/settings.ts
 delete mode 100644 packages/graph-editor/src/redux/selectors/settings.ts
 create mode 100644 packages/graph-editor/src/system/hook.tsx
 create mode 100644 packages/graph-editor/src/system/index.tsx
 create mode 100644 packages/graph-editor/src/system/settings.tsx

diff --git a/packages/graph-editor/readme.md b/packages/graph-editor/readme.md
index 274985faa..41dd56bac 100644
--- a/packages/graph-editor/readme.md
+++ b/packages/graph-editor/readme.md
@@ -83,3 +83,7 @@ In the example above, we use the useRef hook to create a reference to the Editor
 ## Development
 
 We need to force the cypress react selector to use a version of `resq` that supports 18.2.0. This is done through resolutions and by manually adding it as a dev dependency
+
+## Notes
+
+This project uses [CSS modules](https://github.com/css-modules/css-modules) to handle encapsulating css. We distribute this in the dist with imports to `*.module.css` files still remaining without transformation to the css files. We assume that the implementing system will handle this transformation and export of the mangled css classnames if needed.
diff --git a/packages/graph-editor/src/components/contextMenus/paneContextMenu.tsx b/packages/graph-editor/src/components/contextMenus/paneContextMenu.tsx
index b64d011a8..12b62d453 100644
--- a/packages/graph-editor/src/components/contextMenus/paneContextMenu.tsx
+++ b/packages/graph-editor/src/components/contextMenus/paneContextMenu.tsx
@@ -1,13 +1,12 @@
 import { ContextMenuItem } from './ContextMenuStyles.js';
 import { Menu, Separator } from 'react-contexify';
 import { clear } from '../../editor/actions/clear.js';
-import { showGrid, snapGrid } from '@/redux/selectors/settings.js';
 import { useAction } from '@/editor/actions/provider.js';
 import { useAutoLayout } from '../../editor/hooks/useAutolayout.js';
 import { useDispatch } from '@/hooks/index.js';
 import { useLocalGraph } from '@/context/graph.js';
 import { useReactFlow } from 'reactflow';
-import { useSelector } from 'react-redux';
+import { useSystem } from '@/system/hook.js';
 import React, { useCallback } from 'react';
 
 export interface IPaneContextMenu<T = unknown> {
@@ -17,8 +16,8 @@ export interface IPaneContextMenu<T = unknown> {
 
 export const PaneContextMenu = <T = unknown,>({ id }: IPaneContextMenu<T>) => {
   const reactFlowInstance = useReactFlow();
-  const showGridValue = useSelector(showGrid);
-  const snapGridValue = useSelector(snapGrid);
+
+  const system = useSystem();
   const dispatch = useDispatch();
   const graph = useLocalGraph();
   const createNode = useAction('createNode');
@@ -51,12 +50,12 @@ export const PaneContextMenu = <T = unknown,>({ id }: IPaneContextMenu<T>) => {
   }, [reactFlowInstance]);
 
   const setShowGrid = useCallback(() => {
-    dispatch.settings.setShowGrid(!showGridValue);
-  }, [dispatch.settings, showGridValue]);
+    system.settings.setShowGrid(!system.settings.showGrid);
+  }, [system.settings]);
 
   const setSnapGrid = useCallback(() => {
-    dispatch.settings.setSnapGrid(!snapGridValue);
-  }, [dispatch.settings, snapGridValue]);
+    system.settings.setSnapGrid(!system.settings.snapGrid);
+  }, [system.settings]);
 
   const clearCallback = useCallback(() => {
     clear(reactFlowInstance, graph);
@@ -70,7 +69,7 @@ export const PaneContextMenu = <T = unknown,>({ id }: IPaneContextMenu<T>) => {
       <Separator />
       <ContextMenuItem onClick={layout}>Apply Layout</ContextMenuItem>
       <ContextMenuItem onClick={setShowGrid}>
-        {showGridValue ? 'Hide' : 'Show'} Grid
+        {system.settings.showGrid ? 'Hide' : 'Show'} Grid
       </ContextMenuItem>
       <ContextMenuItem onClick={recenter}>Recenter</ContextMenuItem>
       <Separator />
diff --git a/packages/graph-editor/src/components/controls/array.tsx b/packages/graph-editor/src/components/controls/array.tsx
index 7fba5ac2c..47ad0b9d7 100644
--- a/packages/graph-editor/src/components/controls/array.tsx
+++ b/packages/graph-editor/src/components/controls/array.tsx
@@ -21,10 +21,8 @@ import {
 import { ColorPickerPopover } from '../colorPicker/index.js';
 import { IField } from './interface.js';
 import { JSONTree } from 'react-json-tree';
-import { delayedUpdateSelector } from '@/redux/selectors/index.js';
 import { observer } from 'mobx-react-lite';
 import { toJS } from 'mobx';
-import { useSelector } from 'react-redux';
 import FloppyDisk from '@tokens-studio/icons/FloppyDisk.js';
 import Minus from '@tokens-studio/icons/Minus.js';
 import Plus from '@tokens-studio/icons/Plus.js';
@@ -40,7 +38,7 @@ const NEW_ITEM_DEFAULTS = {
   },
 };
 
-export const ArrayField = observer(({ port, readOnly }: IField) => {
+export const ArrayField = observer(({ port, readOnly, settings }: IField) => {
   const [value, setValue] = React.useState(port.value);
   const [selectItemsType, setSelectItemsType] = React.useState(
     port.type.items.$id,
@@ -49,7 +47,6 @@ export const ArrayField = observer(({ port, readOnly }: IField) => {
   const [autofocusIndex, setAutofocusIndex] = React.useState<number | null>(
     null,
   );
-  const useDelayed = useSelector(delayedUpdateSelector);
 
   React.useEffect(() => {
     setValue(port.value);
@@ -82,13 +79,13 @@ export const ArrayField = observer(({ port, readOnly }: IField) => {
 
       setValue(newValueArray);
 
-      if (useDelayed) {
+      if (settings.delayedUpdate) {
         return;
       }
 
       (port as Input).setValue(newValueArray);
     },
-    [port, useDelayed, value],
+    [port, settings.delayedUpdate, value],
   );
 
   const onColorChange = useCallback(
@@ -106,12 +103,12 @@ export const ArrayField = observer(({ port, readOnly }: IField) => {
 
     setAutofocusIndex(newValueArray.length - 1);
 
-    if (useDelayed) {
+    if (settings.delayedUpdate) {
       return;
     }
 
     (port as Input).setValue(newValueArray);
-  }, [itemsType, port, useDelayed, value]);
+  }, [itemsType, port, settings.delayedUpdate, value]);
 
   const removeItem = useCallback(
     (index: number) => {
@@ -121,13 +118,13 @@ export const ArrayField = observer(({ port, readOnly }: IField) => {
       setValue(newValueArray);
       setAutofocusIndex(null);
 
-      if (useDelayed) {
+      if (settings.delayedUpdate) {
         return;
       }
 
       (port as Input).setValue(newValueArray);
     },
-    [port, useDelayed, value],
+    [port, settings.delayedUpdate, value],
   );
 
   const itemList = React.useMemo(() => {
@@ -255,7 +252,7 @@ export const ArrayField = observer(({ port, readOnly }: IField) => {
           onClick={addItem}
         />
       </Stack>
-      {useDelayed && (
+      {settings.delayedUpdate && (
         <Stack justify="end">
           <IconButton
             icon={<FloppyDisk />}
diff --git a/packages/graph-editor/src/components/controls/color.tsx b/packages/graph-editor/src/components/controls/color.tsx
index 20f4815de..4e51cc16c 100644
--- a/packages/graph-editor/src/components/controls/color.tsx
+++ b/packages/graph-editor/src/components/controls/color.tsx
@@ -2,15 +2,12 @@ import { ColorPickerPopover } from '../colorPicker/index.js';
 import { IField } from './interface.js';
 import { IconButton, Stack, Text } from '@tokens-studio/ui';
 import { Input, hexToColor, toColor, toHex } from '@tokens-studio/graph-engine';
-import { delayedUpdateSelector } from '@/redux/selectors/index.js';
 import { observer } from 'mobx-react-lite';
-import { useSelector } from 'react-redux';
 import FloppyDisk from '@tokens-studio/icons/FloppyDisk.js';
 import React, { useCallback } from 'react';
 import styles from './color.module.css';
 
-export const ColorField = observer(({ port, readOnly }: IField) => {
-  const useDelayed = useSelector(delayedUpdateSelector);
+export const ColorField = observer(({ port, readOnly, settings }: IField) => {
   const [val, setVal] = React.useState('');
 
   React.useEffect(() => {
@@ -33,14 +30,14 @@ export const ColorField = observer(({ port, readOnly }: IField) => {
         col = e.target.value;
       }
       setVal(col);
-      if (useDelayed) {
+      if (settings.delayedUpdate) {
         return;
       }
 
       //We need to convert from hex
       (port as Input).setValue(hexToColor(col));
     },
-    [port, useDelayed],
+    [port, settings.delayedUpdate],
   );
 
   if (readOnly) {
@@ -62,7 +59,7 @@ export const ColorField = observer(({ port, readOnly }: IField) => {
     <Stack direction="row" justify="between" align="center" gap={2}>
       <ColorPickerPopover value={val} onChange={onChange} />
       <Text muted>{val}</Text>
-      {useDelayed && (
+      {settings.delayedUpdate && (
         <IconButton
           icon={<FloppyDisk />}
           onClick={() => (port as Input).setValue(val)}
diff --git a/packages/graph-editor/src/components/controls/curve.tsx b/packages/graph-editor/src/components/controls/curve.tsx
index fc96a719b..b3bce2a9a 100644
--- a/packages/graph-editor/src/components/controls/curve.tsx
+++ b/packages/graph-editor/src/components/controls/curve.tsx
@@ -4,21 +4,23 @@ import { Input } from '@tokens-studio/graph-engine';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
 
-export const CurveField = observer(({ port, readOnly }: IField) => {
-  const onChange = (index: number, value: number[]) => {
-    if (!readOnly) {
-      const points = [...port.value.curves[0].points];
-      points[index] = value;
-      (port as Input).setValue({
-        curves: [
-          {
-            points,
-          },
-        ],
-      });
-    }
-  };
-  return (
-    <CurveEditor points={port.value.curves[0].points} onChange={onChange} />
-  );
-});
+export const CurveField = observer(
+  ({ port, readOnly }: Omit<IField, 'settings'>) => {
+    const onChange = (index: number, value: number[]) => {
+      if (!readOnly) {
+        const points = [...port.value.curves[0].points];
+        points[index] = value;
+        (port as Input).setValue({
+          curves: [
+            {
+              points,
+            },
+          ],
+        });
+      }
+    };
+    return (
+      <CurveEditor points={port.value.curves[0].points} onChange={onChange} />
+    );
+  },
+);
diff --git a/packages/graph-editor/src/components/controls/interface.tsx b/packages/graph-editor/src/components/controls/interface.tsx
index 6cb097cee..64ef95932 100644
--- a/packages/graph-editor/src/components/controls/interface.tsx
+++ b/packages/graph-editor/src/components/controls/interface.tsx
@@ -1,5 +1,7 @@
 import { Port } from '@tokens-studio/graph-engine';
+import { SystemSettings } from '@/system/settings.js';
 export interface IField {
   port: Port;
   readOnly?: boolean;
+  settings: SystemSettings;
 }
diff --git a/packages/graph-editor/src/components/controls/numeric.tsx b/packages/graph-editor/src/components/controls/numeric.tsx
index 6bb608bd9..a51012629 100644
--- a/packages/graph-editor/src/components/controls/numeric.tsx
+++ b/packages/graph-editor/src/components/controls/numeric.tsx
@@ -1,18 +1,16 @@
 import { IField } from './interface.js';
 import { IconButton, Stack, TextInput } from '@tokens-studio/ui';
 import { Input } from '@tokens-studio/graph-engine';
-import { delayedUpdateSelector } from '@/redux/selectors/index.js';
 import { observer } from 'mobx-react-lite';
-import { useSelector } from 'react-redux';
+
 import FloppyDisk from '@tokens-studio/icons/FloppyDisk.js';
 import React, { useCallback } from 'react';
 
-export const NumericField = observer(({ port, readOnly }: IField) => {
+export const NumericField = observer(({ port, readOnly, settings }: IField) => {
   const [intermediate, setIntermediate] = React.useState<string | undefined>(
     undefined,
   );
   const [hadErr, setHadErr] = React.useState<boolean>(false);
-  const useDelayed = useSelector(delayedUpdateSelector);
   const [val, setVal] = React.useState(port.value);
 
   React.useEffect(() => {
@@ -24,7 +22,7 @@ export const NumericField = observer(({ port, readOnly }: IField) => {
       if (!readOnly) {
         const number = Number.parseFloat(e.target.value);
         if (!Number.isNaN(number)) {
-          if (!useDelayed) {
+          if (!settings.delayedUpdate) {
             (port as Input).setValue(number);
           } else {
             setVal(number);
@@ -37,7 +35,7 @@ export const NumericField = observer(({ port, readOnly }: IField) => {
         setIntermediate(e.target.value);
       }
     },
-    [port, readOnly, useDelayed],
+    [readOnly, settings.delayedUpdate, port],
   );
 
   return (
@@ -49,7 +47,7 @@ export const NumericField = observer(({ port, readOnly }: IField) => {
         onChange={onChange}
         disabled={readOnly}
       />
-      {useDelayed && (
+      {settings.delayedUpdate && (
         <IconButton
           icon={<FloppyDisk />}
           onClick={() => (port as Input).setValue(val)}
diff --git a/packages/graph-editor/src/components/controls/slider.tsx b/packages/graph-editor/src/components/controls/slider.tsx
index a7ee58a4d..1509f67fe 100644
--- a/packages/graph-editor/src/components/controls/slider.tsx
+++ b/packages/graph-editor/src/components/controls/slider.tsx
@@ -2,18 +2,16 @@ import { IField } from './interface.js';
 import { IconButton, Stack, Text } from '@tokens-studio/ui';
 import { Input } from '@tokens-studio/graph-engine';
 import { Slider } from '../slider/index.js';
-import { delayedUpdateSelector } from '@/redux/selectors/index.js';
+
 import { observer } from 'mobx-react-lite';
-import { useSelector } from 'react-redux';
 import FloppyDisk from '@tokens-studio/icons/FloppyDisk.js';
 import React, { useCallback } from 'react';
 
-export const SliderField = observer(({ port, readOnly }: IField) => {
+export const SliderField = observer(({ port, readOnly, settings }: IField) => {
   const min = port.type.minimum || 0;
   const max = port.type.maximum || 1;
   const step = port.type.multipleOf || (max - min) / 100;
 
-  const useDelayed = useSelector(delayedUpdateSelector);
   const [val, setVal] = React.useState(port.value);
 
   React.useEffect(() => {
@@ -23,14 +21,14 @@ export const SliderField = observer(({ port, readOnly }: IField) => {
   const onChange = useCallback(
     (value: number[]) => {
       if (!readOnly) {
-        if (!useDelayed) {
+        if (!settings.delayedUpdate) {
           (port as Input).setValue(value[0]);
         } else {
           setVal(value[0]);
         }
       }
     },
-    [port, readOnly, useDelayed],
+    [port, readOnly, settings.delayedUpdate],
   );
 
   return (
@@ -43,7 +41,7 @@ export const SliderField = observer(({ port, readOnly }: IField) => {
         onValueChange={onChange}
       />
       <Text>{val}</Text>
-      {useDelayed && (
+      {settings.delayedUpdate && (
         <IconButton
           icon={<FloppyDisk />}
           onClick={() => (port as Input).setValue(val)}
diff --git a/packages/graph-editor/src/components/controls/string.tsx b/packages/graph-editor/src/components/controls/string.tsx
index 438b53bdc..41640f5b6 100644
--- a/packages/graph-editor/src/components/controls/string.tsx
+++ b/packages/graph-editor/src/components/controls/string.tsx
@@ -1,14 +1,11 @@
 import { IField } from './interface.js';
 import { IconButton, Stack, Text, TextInput } from '@tokens-studio/ui';
 import { Input } from '@tokens-studio/graph-engine';
-import { delayedUpdateSelector } from '@/redux/selectors/index.js';
 import { observer } from 'mobx-react-lite';
-import { useSelector } from 'react-redux';
 import FloppyDisk from '@tokens-studio/icons/FloppyDisk.js';
 import React, { useEffect } from 'react';
 
-export const Textfield = observer(({ port, readOnly }: IField) => {
-  const useDelayed = useSelector(delayedUpdateSelector);
+export const Textfield = observer(({ port, readOnly, settings }: IField) => {
   const [val, setVal] = React.useState(port.value);
 
   useEffect(() => {
@@ -18,7 +15,7 @@ export const Textfield = observer(({ port, readOnly }: IField) => {
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const str = e.target.value;
     setVal(str);
-    if (useDelayed) {
+    if (settings.delayedUpdate) {
       return;
     }
 
@@ -32,7 +29,7 @@ export const Textfield = observer(({ port, readOnly }: IField) => {
   return (
     <Stack gap={3}>
       <TextInput width={'100%'} value={val} onChange={onChange} />
-      {useDelayed && (
+      {settings.delayedUpdate && (
         <IconButton
           icon={<FloppyDisk />}
           onClick={() => (port as Input).setValue(val)}
diff --git a/packages/graph-editor/src/components/controls/text.tsx b/packages/graph-editor/src/components/controls/text.tsx
index 33b5ad6c8..e64df340c 100644
--- a/packages/graph-editor/src/components/controls/text.tsx
+++ b/packages/graph-editor/src/components/controls/text.tsx
@@ -1,14 +1,12 @@
 import { IField } from './interface.js';
 import { IconButton, Textarea as UITextarea } from '@tokens-studio/ui';
 import { Input } from '@tokens-studio/graph-engine';
-import { delayedUpdateSelector } from '@/redux/selectors/index.js';
 import { observer } from 'mobx-react-lite';
-import { useSelector } from 'react-redux';
+
 import FloppyDisk from '@tokens-studio/icons/FloppyDisk.js';
 import React, { useEffect } from 'react';
 
-export const TextArea = observer(({ port, readOnly }: IField) => {
-  const useDelayed = useSelector(delayedUpdateSelector);
+export const TextArea = observer(({ settings, port, readOnly }: IField) => {
   const [val, setVal] = React.useState(port.value);
 
   useEffect(() => {
@@ -17,7 +15,7 @@ export const TextArea = observer(({ port, readOnly }: IField) => {
 
   const onChange = (str: string) => {
     setVal(str);
-    if (useDelayed) {
+    if (settings.delayedUpdate) {
       return;
     }
 
@@ -31,7 +29,7 @@ export const TextArea = observer(({ port, readOnly }: IField) => {
   return (
     <>
       <UITextarea value={val} onChange={onChange} />
-      {useDelayed && (
+      {settings.delayedUpdate && (
         <IconButton
           icon={<FloppyDisk />}
           onClick={() => (port as Input).setValue(val)}
diff --git a/packages/graph-editor/src/components/dialogs/findDialog.tsx b/packages/graph-editor/src/components/dialogs/findDialog.tsx
index a16e4d58a..5525503b2 100644
--- a/packages/graph-editor/src/components/dialogs/findDialog.tsx
+++ b/packages/graph-editor/src/components/dialogs/findDialog.tsx
@@ -1,11 +1,9 @@
 import { Button, Dialog, IconButton, Text, TextInput } from '@tokens-studio/ui';
 import { title as annotatedTitle } from '@/annotations/index.js';
-import {
-  graphEditorSelector,
-  showSearchSelector,
-} from '@/redux/selectors/index.js';
-import { useDispatch, useGraph } from '@/hooks/index.js';
+import { graphEditorSelector } from '@/redux/selectors/index.js';
+import { useGraph } from '@/hooks/index.js';
 import { useSelector } from 'react-redux';
+import { useSystem } from '@/system/hook.js';
 import React from 'react';
 import Xmark from '@tokens-studio/icons/Xmark.js';
 
@@ -13,12 +11,11 @@ export const FindDialog = () => {
   const [id, setId] = React.useState('');
   const [title, setTitle] = React.useState('');
   const localGraph = useGraph();
-  const dispatch = useDispatch();
   const graph = useSelector(graphEditorSelector);
-  const open = useSelector(showSearchSelector);
+  const system = useSystem();
 
   const setOpen = (value: boolean) => {
-    dispatch.settings.setShowSearch(value);
+    system.settings.setShowSearch(value);
   };
 
   const onClick = () => {
@@ -65,7 +62,7 @@ export const FindDialog = () => {
   };
 
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
+    <Dialog open={system.settings.showSearch} onOpenChange={setOpen}>
       <Dialog.Portal>
         <Dialog.Overlay />
         <Dialog.Content>
diff --git a/packages/graph-editor/src/components/flow/edges/edge.tsx b/packages/graph-editor/src/components/flow/edges/edge.tsx
index e86b056e8..5b0263068 100644
--- a/packages/graph-editor/src/components/flow/edges/edge.tsx
+++ b/packages/graph-editor/src/components/flow/edges/edge.tsx
@@ -1,14 +1,14 @@
-import { EdgeType } from '../../../redux/models/settings.js';
+import { EdgeType, SystemSettings } from '@/system/settings.js';
 import { Port } from '@tokens-studio/graph-engine';
-import { edgeType as edgeTypeSelector } from '../../../redux/selectors/settings.js';
 import { getBetterBezierPath } from './offsetBezier.js';
 import {
   getSimpleBezierPath,
   getSmoothStepPath,
   getStraightPath,
 } from 'reactflow';
+import { observer } from 'mobx-react-lite';
 import { useLocalGraph } from '@/context/graph.js';
-import { useSelector } from 'react-redux';
+import { useSystem } from '@/system/hook.js';
 import React from 'react';
 import colors from '@/tokens/colors.js';
 
@@ -26,89 +26,112 @@ const extractColor = (port: Port) => {
   return { color, backgroundColor };
 };
 
-export default function CustomEdge({
-  id,
-  sourceX,
-  sourceY,
-  targetX,
-  targetY,
-  sourcePosition,
-  targetPosition,
-  style = {},
-  data,
-  markerEnd,
-}) {
-  const edgeType = useSelector(edgeTypeSelector);
-  const graph = useLocalGraph();
-
-  const edge = graph.getEdge(id);
-  let col = undefined;
-
-  if (edge) {
-    const sourceNode = graph.getNode(edge?.source);
-
-    const sourcePort = sourceNode?.outputs[edge?.sourceHandle];
-
-    if (sourcePort) {
-      const { backgroundColor } = extractColor(sourcePort as Port);
-      col = backgroundColor;
-    }
-  }
+export default (props) => {
+  const system = useSystem();
+  return <CustomEdgeInner {...props} settings={system.settings} />;
+};
 
-  let edgeFn;
-  switch (edgeType) {
-    case EdgeType.bezier:
-      edgeFn = getBetterBezierPath;
-      break;
-    case EdgeType.simpleBezier:
-      edgeFn = getSimpleBezierPath;
-      break;
-    case EdgeType.smoothStep:
-      edgeFn = getSmoothStepPath;
-      break;
-    case EdgeType.straight:
-      edgeFn = getStraightPath;
-      break;
-    default:
-      edgeFn = getBetterBezierPath;
-  }
+export interface ICustomEdge {
+  settings: SystemSettings;
+  id: string;
+  sourceX: number;
+  sourceY: number;
+  targetX: number;
+  targetY: number;
+  sourcePosition: object;
+  targetPosition: object;
+  style: object;
+  data?: {
+    text: string;
+  };
+  markerEnd: string;
+}
 
-  const [edgePath] = edgeFn({
+export const CustomEdgeInner = observer(
+  ({
+    settings,
+    id,
     sourceX,
     sourceY,
-    sourcePosition,
     targetX,
     targetY,
+    sourcePosition,
     targetPosition,
-  });
+    style = {},
+    data,
+    markerEnd,
+  }: ICustomEdge) => {
+    const graph = useLocalGraph();
 
-  return (
-    <>
-      <path className="react-flow__edge-path-back" d={edgePath} />
-      <path
-        id={id}
-        className="react-flow__edge-path"
-        d={edgePath}
-        style={{ ...style, stroke: col }}
-        markerEnd={markerEnd}
-      />
-      <path
-        d={edgePath}
-        fill="none"
-        strokeOpacity="0"
-        strokeWidth="20"
-        className="react-flow__edge-interaction"
-      />
-      <text>
-        <textPath
-          href={`#${id}`}
-          style={{ fontSize: 12 }}
-          startOffset="50%"
-          textAnchor="middle"
-        >
-          {data?.text}
-        </textPath>
-      </text>
-    </>
-  );
-}
+    const edge = graph.getEdge(id);
+    let col = undefined;
+
+    if (edge) {
+      const sourceNode = graph.getNode(edge?.source);
+
+      const sourcePort = sourceNode?.outputs[edge?.sourceHandle];
+
+      if (sourcePort) {
+        const { backgroundColor } = extractColor(sourcePort as Port);
+        col = backgroundColor;
+      }
+    }
+
+    let edgeFn;
+    switch (settings.edgeType) {
+      case EdgeType.bezier:
+        edgeFn = getBetterBezierPath;
+        break;
+      case EdgeType.simpleBezier:
+        edgeFn = getSimpleBezierPath;
+        break;
+      case EdgeType.smoothStep:
+        edgeFn = getSmoothStepPath;
+        break;
+      case EdgeType.straight:
+        edgeFn = getStraightPath;
+        break;
+      default:
+        edgeFn = getBetterBezierPath;
+    }
+
+    const [edgePath] = edgeFn({
+      sourceX,
+      sourceY,
+      sourcePosition,
+      targetX,
+      targetY,
+      targetPosition,
+    });
+
+    return (
+      <>
+        <path className="react-flow__edge-path-back" d={edgePath} />
+        <path
+          id={id}
+          className="react-flow__edge-path"
+          d={edgePath}
+          style={{ ...style, stroke: col }}
+          markerEnd={markerEnd}
+        />
+        <path
+          d={edgePath}
+          fill="none"
+          strokeOpacity="0"
+          strokeWidth="20"
+          className="react-flow__edge-interaction"
+        />
+        <text>
+          <textPath
+            href={`#${id}`}
+            style={{ fontSize: 12 }}
+            startOffset="50%"
+            textAnchor="middle"
+          >
+            {data?.text}
+          </textPath>
+        </text>
+      </>
+    );
+  },
+);
diff --git a/packages/graph-editor/src/components/flow/nodes/passthroughNode.tsx b/packages/graph-editor/src/components/flow/nodes/passthroughNode.tsx
index 092dff2a5..70aa97571 100644
--- a/packages/graph-editor/src/components/flow/nodes/passthroughNode.tsx
+++ b/packages/graph-editor/src/components/flow/nodes/passthroughNode.tsx
@@ -2,21 +2,20 @@ import { Handle } from '../handles.js';
 import { HandleContainer } from '../handles.js';
 import { Stack } from '@tokens-studio/ui';
 import { extractType, extractTypeIcon } from '../wrapper/nodeV2.js';
-import { icons } from '@/registry/icon.js';
 import { useLocalGraph } from '@/context/graph.js';
-import { useSelector } from 'react-redux';
+import { useSystem } from '@/system/hook.js';
 import React from 'react';
 
 export const PassthroughNode = (args) => {
   const { id } = args;
   const graph = useLocalGraph();
   const node = graph.getNode(id);
-  const iconTypeRegistry = useSelector(icons);
+  const system = useSystem();
 
   if (!node) return null;
 
   const port = node.inputs.value;
-  const typeCol = extractTypeIcon(port, iconTypeRegistry);
+  const typeCol = extractTypeIcon(port, system.icons);
   const type = extractType(port.type);
 
   return (
diff --git a/packages/graph-editor/src/components/flow/wrapper/nodeV2.tsx b/packages/graph-editor/src/components/flow/wrapper/nodeV2.tsx
index 3cf7ee226..61c6731bb 100644
--- a/packages/graph-editor/src/components/flow/wrapper/nodeV2.tsx
+++ b/packages/graph-editor/src/components/flow/wrapper/nodeV2.tsx
@@ -17,16 +17,11 @@ import { ErrorBoundaryContent } from '@/components/ErrorBoundaryContent.js';
 import { Node as GraphNode } from '@tokens-studio/graph-engine';
 import { Handle, HandleContainer, useHandle } from '../handles.js';
 import { Stack, Text } from '@tokens-studio/ui';
-import { icons, nodeSpecifics } from '@/redux/selectors/registry.js';
-import {
-  inlineTypes,
-  inlineValues,
-  showTimings,
-} from '@/redux/selectors/settings.js';
+import { SystemSettings } from '@/system/settings.js';
 import { observer } from 'mobx-react-lite';
 import { title } from '@/annotations/index.js';
 import { useLocalGraph } from '@/context/graph.js';
-import { useSelector } from 'react-redux';
+import { useSystem } from '@/system/hook.js';
 import React from 'react';
 import clsx from 'clsx';
 import colors from '@/tokens/colors.js';
@@ -57,6 +52,7 @@ export const NodeV2 = (args) => {
   const { id } = args;
   const graph = useLocalGraph();
   const node = graph.getNode(id);
+  const system = useSystem();
 
   if (!node) {
     return <div>Node not found</div>;
@@ -64,7 +60,11 @@ export const NodeV2 = (args) => {
 
   return (
     <ErrorBoundary fallback={<ErrorBoundaryContent />}>
-      <NodeWrap node={node} icon={args?.data?.icon} />
+      <NodeWrap
+        node={node}
+        icon={args?.data?.icon}
+        settings={system.settings}
+      />
     </ErrorBoundary>
   );
 };
@@ -77,10 +77,40 @@ export interface INodeWrap {
   subtitle?: string;
   icon?: React.ReactNode;
   node: GraphNode;
+  settings: SystemSettings;
+}
+
+export interface ISpecificWrapper {
+  specifics: Record<
+    string,
+    React.FC<{
+      node: GraphNode;
+    }>
+  >;
+  node: GraphNode;
 }
-const NodeWrap = observer(({ node, icon }: INodeWrap) => {
-  const showTimingsValue = useSelector(showTimings);
-  const specifics = useSelector(nodeSpecifics);
+
+export const SpecificWrapper = observer(
+  ({ specifics, node }: ISpecificWrapper) => {
+    const Specific = specifics[node.factory.type];
+
+    if (!Specific) {
+      return null;
+    }
+    return (
+      <Stack
+        direction="column"
+        gap={3}
+        style={{ padding: 'var(--component-spacing-md)' }}
+      >
+        <Specific node={node} />
+      </Stack>
+    );
+  },
+);
+
+const NodeWrap = observer(({ settings, node, icon }: INodeWrap) => {
+  const system = useSystem();
 
   //Check if the input allows for dynamic inputs
   const isInput = !!(
@@ -88,8 +118,6 @@ const NodeWrap = observer(({ node, icon }: INodeWrap) => {
     node.annotations[annotatedDynamicInputs]
   );
 
-  const Specific = specifics[node.factory.type];
-
   return (
     <BaseNodeWrapper
       id={node.id}
@@ -117,17 +145,9 @@ const NodeWrap = observer(({ node, icon }: INodeWrap) => {
             <PortArray ports={node.inputs} />
           </HandleContainer>
         </Stack>
-        {Specific && (
-          <Stack
-            direction="column"
-            gap={3}
-            style={{ padding: 'var(--component-spacing-md)' }}
-          >
-            <Specific node={node} />
-          </Stack>
-        )}
+        <SpecificWrapper specifics={system.specifics} node={node} />
       </Stack>
-      {showTimingsValue && (
+      {settings.showTimings && (
         <div className={styles.timingText}>
           <Text size="xsmall" muted>
             {node.lastExecutedDuration}ms
@@ -137,18 +157,25 @@ const NodeWrap = observer(({ node, icon }: INodeWrap) => {
     </BaseNodeWrapper>
   );
 });
+
 export interface IPortArray {
   ports: Record<string, Port>;
   hideNames?: boolean;
 }
 export const PortArray = observer(({ ports, hideNames }: IPortArray) => {
+  const system = useSystem();
   const entries = Object.values(ports).sort();
   return (
     <>
       {entries
         .filter((x) => x.visible != false || x.isConnected)
         .map((input) => (
-          <InputHandle port={input} hideName={hideNames} />
+          <InputHandle
+            port={input}
+            hideName={hideNames}
+            inlineTypes={system.settings.inlineTypes}
+            inlineValues={system.settings.inlineValues}
+          />
         ))}
     </>
   );
@@ -313,12 +340,17 @@ const getValuePreview = (value, type) => {
     : valuePreview;
 };
 
+export interface IInputHandle {
+  port: Port;
+  hideName?: boolean;
+  inlineTypes: boolean;
+  inlineValues: boolean;
+}
+
 const InputHandle = observer(
-  ({ port, hideName }: { port: Port; hideName?: boolean }) => {
-    const inlineTypesValue = useSelector(inlineTypes);
-    const iconTypeRegistry = useSelector(icons);
-    const inlineValuesValue = useSelector(inlineValues);
-    const typeCol = extractTypeIcon(port, iconTypeRegistry);
+  ({ port, hideName, inlineTypes, inlineValues }: IInputHandle) => {
+    const system = useSystem();
+    const typeCol = extractTypeIcon(port, system.icons);
     const input = port as unknown as Input;
     const type = extractType(port.type);
     const handleInformation = useHandle();
@@ -334,7 +366,7 @@ const InputHandle = observer(
             variadic
           >
             {!hideName && <Text>{port.name} + </Text>}
-            {inlineTypesValue && <InlineTypeLabel port={port} />}
+            {inlineTypes && <InlineTypeLabel port={port} />}
           </Handle>
           {port._edges.map((edge, i) => {
             return (
@@ -354,7 +386,7 @@ const InputHandle = observer(
                       flexDirection: 'row',
                     }}
                   >
-                    {inlineValuesValue && (
+                    {inlineValues && (
                       <span
                         style={{
                           font: 'var(--font-code-md)',
@@ -366,7 +398,7 @@ const InputHandle = observer(
                     )}
                   </div>
                 )}
-                {inlineTypesValue && <InlineTypeLabel port={port} />}
+                {inlineTypes && <InlineTypeLabel port={port} />}
               </Handle>
             );
           })}
@@ -401,7 +433,7 @@ const InputHandle = observer(
             >
               {input.name}
             </span>
-            {inlineValuesValue && (
+            {inlineValues && (
               <span
                 style={{
                   font: 'var(--font-code-xs)',
@@ -413,7 +445,7 @@ const InputHandle = observer(
             )}
           </Stack>
         )}
-        {inlineTypesValue && <InlineTypeLabel port={port} />}
+        {inlineTypes && <InlineTypeLabel port={port} />}
       </Handle>
     );
   },
diff --git a/packages/graph-editor/src/components/hotKeys/index.tsx b/packages/graph-editor/src/components/hotKeys/index.tsx
index 7fbb3e2d6..8f3ec8c29 100644
--- a/packages/graph-editor/src/components/hotKeys/index.tsx
+++ b/packages/graph-editor/src/components/hotKeys/index.tsx
@@ -1,12 +1,6 @@
 import { HotKeys as HotKeysComp } from 'react-hotkeys';
 import { SerializedNode } from '@/types/serializedNode.js';
 import { annotatedDeleteable } from '@tokens-studio/graph-engine';
-import {
-  inlineTypes,
-  inlineValues,
-  showGrid,
-  snapGrid,
-} from '@/redux/selectors/settings.js';
 import { savedViewports } from '@/annotations/index.js';
 import { useAction } from '@/editor/actions/provider.js';
 import { useAutoLayout } from '@/editor/hooks/useAutolayout.js';
@@ -14,7 +8,7 @@ import { useDispatch } from '@/hooks/useDispatch.js';
 import { useLocalGraph } from '@/hooks/index.js';
 import { useMemo } from 'react';
 import { useReactFlow } from 'reactflow';
-import { useSelector } from 'react-redux';
+import { useSystem } from '@/system/hook.js';
 import { useToast } from '@/hooks/useToast.js';
 import React from 'react';
 import copy from 'copy-to-clipboard';
@@ -79,10 +73,7 @@ export const getViewports = (graph) => {
 };
 
 export const useHotkeys = () => {
-  const showGridValue = useSelector(showGrid);
-  const snapGridValue = useSelector(snapGrid);
-  const inlineTypesValue = useSelector(inlineTypes);
-  const inlineValuesValue = useSelector(inlineValues);
+  const system = useSystem();
   const duplicateNodes = useAction('duplicateNodes');
   const deleteNode = useAction('deleteNode');
   const copyNodes = useAction('copyNodes');
@@ -232,20 +223,20 @@ export const useHotkeys = () => {
       },
       TOGGLE_GRID: (event) => {
         event.preventDefault();
-        dispatch.settings.setShowGrid(!showGridValue);
+        system.settings.setShowGrid(!system.settings.showGrid);
       },
       FIND: (event) => {
         event.preventDefault();
         dispatch.settings.setShowSearch(true);
       },
       TOGGLE_SNAP_GRID: () => {
-        dispatch.settings.setSnapGrid(!snapGridValue);
+        system.settings.setSnapGrid(!system.settings.snapGrid);
       },
       TOGGLE_TYPES: () => {
-        dispatch.settings.setInlineTypes(!inlineTypesValue);
+        system.settings.setInlineTypes(!system.settings.inlineTypes);
       },
       TOGGLE_VALUES: () => {
-        dispatch.settings.setInlineValues(!inlineValuesValue);
+        dispatch.settings.setInlineValues(!system.settings.inlineValues);
       },
     }),
 
@@ -257,10 +248,7 @@ export const useHotkeys = () => {
       graph,
       layout,
       reactFlowInstance,
-      showGridValue,
-      snapGridValue,
-      inlineTypesValue,
-      inlineValuesValue,
+      system.settings,
       trigger,
     ],
   );
diff --git a/packages/graph-editor/src/components/panels/dropPanel/dropPanel.tsx b/packages/graph-editor/src/components/panels/dropPanel/dropPanel.tsx
index f47d36f07..dd494e9f6 100644
--- a/packages/graph-editor/src/components/panels/dropPanel/dropPanel.tsx
+++ b/packages/graph-editor/src/components/panels/dropPanel/dropPanel.tsx
@@ -2,8 +2,7 @@ import { Accordion, Stack, TextInput } from '@tokens-studio/ui';
 import { DragItem } from './DragItem.js';
 import { DropPanelStore } from './data.js';
 import { observer } from 'mobx-react-lite';
-import { panelItemsSelector } from '@/redux/selectors/registry.js';
-import { useSelector } from 'react-redux';
+import { useSystem } from '@/system/hook.js';
 import NavArrowRight from '@tokens-studio/icons/NavArrowRight.js';
 import React, { useState } from 'react';
 import styles from './dropPanel.module.css';
@@ -23,8 +22,8 @@ export interface IDropPanel {
 }
 
 export const DropPanel = () => {
-  const data = useSelector(panelItemsSelector);
-  return <DropPanelInner data={data} />;
+  const sys = useSystem();
+  return <DropPanelInner data={sys.panelItems} />;
 };
 
 export const DropPanelInner = observer(({ data }: IDropPanel) => {
diff --git a/packages/graph-editor/src/components/panels/inputs/dynamicInputs.tsx b/packages/graph-editor/src/components/panels/inputs/dynamicInputs.tsx
index e8cc5e78d..c7ab04606 100644
--- a/packages/graph-editor/src/components/panels/inputs/dynamicInputs.tsx
+++ b/packages/graph-editor/src/components/panels/inputs/dynamicInputs.tsx
@@ -1,7 +1,6 @@
 import {
   Button,
   Checkbox,
-  Heading,
   Label,
   Select,
   Stack,
@@ -77,7 +76,6 @@ export const DynamicInputs = observer(({ node }: { node: Node }) => {
 
   return (
     <Stack direction="column" gap={4}>
-      <Heading size="small">Add Input</Heading>
       <Stack direction="row" gap={3}>
         <TextInput
           onChange={onNameChange}
diff --git a/packages/graph-editor/src/components/panels/inputs/index.tsx b/packages/graph-editor/src/components/panels/inputs/index.tsx
index 4d915f0f8..291d2a43c 100644
--- a/packages/graph-editor/src/components/panels/inputs/index.tsx
+++ b/packages/graph-editor/src/components/panels/inputs/index.tsx
@@ -1,14 +1,14 @@
-import { Heading, Stack } from '@tokens-studio/ui';
-import React, { useMemo } from 'react';
-
 import { DynamicInputs } from './dynamicInputs.js';
 import { PortPanel } from '@/components/portPanel/index.js';
+import { Stack } from '@tokens-studio/ui/Stack.js';
 import { annotatedDynamicInputs } from '@tokens-studio/graph-engine';
 import { currentNode } from '@/redux/selectors/graph.js';
 import { editable } from '@/annotations/index.js';
 import { inputControls } from '@/redux/selectors/registry.js';
 import { useGraph } from '@/hooks/useGraph.js';
 import { useSelector } from 'react-redux';
+import React, { useMemo } from 'react';
+import styles from '../output/styles.module.css';
 
 export function Inputsheet() {
   const graph = useGraph();
@@ -35,47 +35,14 @@ export function Inputsheet() {
   );
 
   return (
-    <div
-      style={{
-        height: '100%',
-        width: '100%',
-        flex: 1,
-        display: 'flex',
-        overflow: 'auto',
-        flexDirection: 'column',
-      }}
-    >
-      <Stack
-        direction="column"
-        gap={4}
-        style={{
-          height: '100%',
-          flex: 1,
-          padding: 'var(--component-spacing-md)',
-        }}
-      >
-        <Stack direction="column" gap={3}>
-          <Stack gap={2} align="start" justify="between">
-            <Heading size="large"> {selectedNode.factory.title}</Heading>
-          </Stack>
-        </Stack>
-
-        <div style={{ padding: 'var(--component-spacing-md)' }}>
-          {dynamicInputs && <DynamicInputs node={selectedNode} />}
+    <Stack direction="column" gap={4} className={styles.outer}>
+      {dynamicInputs && <DynamicInputs node={selectedNode} />}
 
-          {SpecificInput ? <SpecificInput node={selectedNode} /> : null}
-          <Stack
-            width="full"
-            style={{
-              paddingTop: 'var(--component-spacing-md)',
-              paddingBottom: 'var(--component-spacing-md)',
-            }}
-          >
-            {/* The purpose of the key is to invalidate the port panel if the selected node changes */}
-            <PortPanel ports={selectedNode?.inputs} key={selectedNode.id} />
-          </Stack>
-        </div>
+      {SpecificInput ? <SpecificInput node={selectedNode} /> : null}
+      <Stack width="full" className={styles.inner}>
+        {/* The purpose of the key is to invalidate the port panel if the selected node changes */}
+        <PortPanel ports={selectedNode?.inputs} key={selectedNode.id} />
       </Stack>
-    </div>
+    </Stack>
   );
 }
diff --git a/packages/graph-editor/src/components/panels/legend/index.tsx b/packages/graph-editor/src/components/panels/legend/index.tsx
index 2fed1030f..a7f4f8ad9 100644
--- a/packages/graph-editor/src/components/panels/legend/index.tsx
+++ b/packages/graph-editor/src/components/panels/legend/index.tsx
@@ -1,12 +1,11 @@
 import { Stack, Text } from '@tokens-studio/ui';
-import { icons } from '@/redux/selectors/registry.js';
-import { useSelector } from 'react-redux';
+import { useSystem } from '@/system/hook.js';
 import React, { useMemo } from 'react';
 import colors from '@/tokens/colors.js';
 
 export const Legend = () => {
-  const iconsRegistry = useSelector(icons);
-  return <LegendInner iconsRegistry={iconsRegistry} />;
+  const system = useSystem();
+  return <LegendInner iconsRegistry={system.icons} />;
 };
 
 export interface ILegendInner {
diff --git a/packages/graph-editor/src/components/panels/output/index.tsx b/packages/graph-editor/src/components/panels/output/index.tsx
index 8621fbf08..1256baf77 100644
--- a/packages/graph-editor/src/components/panels/output/index.tsx
+++ b/packages/graph-editor/src/components/panels/output/index.tsx
@@ -1,11 +1,12 @@
-import { Heading, Stack } from '@tokens-studio/ui';
 import { Node } from '@tokens-studio/graph-engine';
 import { PortPanel } from '@/components/portPanel/index.js';
+import { Stack } from '@tokens-studio/ui/Stack.js';
 import { currentNode } from '@/redux/selectors/graph.js';
 import { observer } from 'mobx-react-lite';
 import { useGraph } from '@/hooks/useGraph.js';
 import { useSelector } from 'react-redux';
 import React, { useMemo } from 'react';
+import styles from './styles.module.css';
 
 export function OutputSheet() {
   const graph = useGraph();
@@ -23,43 +24,10 @@ export function OutputSheet() {
  */
 const OutputSheetObserver = observer(({ node }: { node: Node }) => {
   return (
-    <div
-      style={{
-        height: '100%',
-        width: '100%',
-        flex: 1,
-        display: 'flex',
-        overflow: 'auto',
-        flexDirection: 'column',
-      }}
-    >
-      <Stack
-        direction="column"
-        gap={4}
-        style={{
-          height: '100%',
-          flex: 1,
-          padding: 'var(--component-spacing-md)',
-        }}
-      >
-        <Stack direction="column" gap={3}>
-          <Stack gap={2} align="start" justify="between">
-            <Heading size="large"> {node.factory.title}</Heading>
-          </Stack>
-        </Stack>
-
-        <div style={{ padding: 'var(--component-spacing-md)' }}>
-          <Stack
-            width="full"
-            style={{
-              paddingTop: 'var(--component-spacing-md)',
-              paddingBottom: 'var(--component-spacing-md)',
-            }}
-          >
-            <PortPanel ports={node?.outputs} readOnly key={node.id} />
-          </Stack>
-        </div>
+    <Stack direction="column" gap={4} className={styles.outer}>
+      <Stack width="full" className={styles.inner}>
+        <PortPanel ports={node?.outputs} readOnly key={node.id} />
       </Stack>
-    </div>
+    </Stack>
   );
 });
diff --git a/packages/graph-editor/src/components/panels/output/styles.module.css b/packages/graph-editor/src/components/panels/output/styles.module.css
new file mode 100644
index 000000000..61e2800ca
--- /dev/null
+++ b/packages/graph-editor/src/components/panels/output/styles.module.css
@@ -0,0 +1,10 @@
+.outer {
+    height: 100%;
+    flex: 1;
+    padding: var(--component-spacing-md);
+}
+
+.inner {
+    padding-top: var(--component-spacing-md);
+    padding-bottom: var(--component-spacing-md);
+}
\ No newline at end of file
diff --git a/packages/graph-editor/src/components/panels/settings/index.tsx b/packages/graph-editor/src/components/panels/settings/index.tsx
index 5b7659377..624bef8a8 100644
--- a/packages/graph-editor/src/components/panels/settings/index.tsx
+++ b/packages/graph-editor/src/components/panels/settings/index.tsx
@@ -1,191 +1,184 @@
 import { Checkbox, Label, Select, Stack, Text } from '@tokens-studio/ui';
-import { EdgeType, LayoutType } from '@/redux/models/settings.js';
-import {
-  connectOnClickSelector,
-  delayedUpdateSelector,
-  edgeType,
-  inlineTypes,
-  inlineValues,
-  layoutType,
-  showMinimapSelector,
-  showTimings,
-} from '@/redux/selectors/settings.js';
+import { EdgeType, LayoutType, SystemSettings } from '@/system/settings.js';
 import { contextMenuSelector } from '@/redux/selectors/ui.js';
+import { observer } from 'mobx-react-lite';
 import { useDispatch } from '@/hooks/useDispatch.js';
 import { useSelector } from 'react-redux';
+import { useSystem } from '@/system/hook.js';
 import React from 'react';
 
 const EdgeValues = Object.values(EdgeType);
 const LayoutValues = Object.values(LayoutType);
 
 export const Settings = () => {
-  const edgeTypeValue = useSelector(edgeType);
-  const layoutTypeValue = useSelector(layoutType);
-  const showTimingsValue = useSelector(showTimings);
-  const inlineTypesValue = useSelector(inlineTypes);
-  const inlineValuesValue = useSelector(inlineValues);
-  const delayedUpdateValue = useSelector(delayedUpdateSelector);
-  const connectOnClick = useSelector(connectOnClickSelector);
-  const contextMenus = useSelector(contextMenuSelector);
-  const showMinimap = useSelector(showMinimapSelector);
-  const dispatch = useDispatch();
+  const system = useSystem();
 
-  return (
-    <div
-      style={{
-        height: '100%',
-        width: '100%',
-        flex: 1,
-        display: 'flex',
-        overflow: 'auto',
-        padding: 'var(--ui-spacing-md)',
-        flexDirection: 'column',
-      }}
-    >
-      <Stack direction="column" gap={5}>
-        <Stack direction="row" gap={2} justify="start">
-          <Checkbox
-            onCheckedChange={(checked) =>
-              dispatch.settings.setInlineTypes(Boolean(checked))
-            }
-            checked={inlineTypesValue}
-          />
-          <Stack direction="column" gap={1} justify="start">
-            <Label>Show inline types</Label>
-            <Text size="xsmall" muted>
-              Adds additional labels to help differentiate types for colorblind
-              users.
-            </Text>
-          </Stack>
-        </Stack>
-        <Stack direction="row" gap={2} justify="start">
-          <Checkbox
-            onCheckedChange={(checked) =>
-              dispatch.settings.setInlineValues(Boolean(checked))
-            }
-            checked={inlineValuesValue}
-          />
-          <Stack direction="column" gap={1} justify="start">
-            <Label>Show inline values</Label>
-            <Text size="xsmall" muted>
-              Shows values directly on the node. Useful for debugging but can be
-              cluttered.
-            </Text>
-          </Stack>
-        </Stack>
-        <Stack direction="row" gap={2} justify="start">
-          <Checkbox
-            onCheckedChange={(checked) =>
-              dispatch.settings.setDelayedUpdate(Boolean(checked))
-            }
-            checked={delayedUpdateValue}
-          />
-          <Stack direction="column" gap={1} justify="start">
-            <Label>Use delayed interaction</Label>
-            <Text size="xsmall" muted>
-              Forces a user to click save to update port.
-            </Text>
+  return <SettingsInner settings={system.settings} />;
+};
+
+export const SettingsInner = observer(
+  ({ settings }: { settings: SystemSettings }) => {
+    const contextMenus = useSelector(contextMenuSelector);
+    const dispatch = useDispatch();
+
+    return (
+      <div
+        style={{
+          height: '100%',
+          width: '100%',
+          flex: 1,
+          display: 'flex',
+          overflow: 'auto',
+          padding: 'var(--ui-spacing-md)',
+          flexDirection: 'column',
+        }}
+      >
+        <Stack direction="column" gap={5}>
+          <Stack direction="row" gap={2} justify="start">
+            <Checkbox
+              onCheckedChange={(checked) =>
+                settings.setInlineTypes(Boolean(checked))
+              }
+              checked={settings.inlineTypes}
+            />
+            <Stack direction="column" gap={1} justify="start">
+              <Label>Show inline types</Label>
+              <Text size="xsmall" muted>
+                Adds additional labels to help differentiate types for
+                colorblind users.
+              </Text>
+            </Stack>
           </Stack>
-        </Stack>
-        <Stack direction="row" gap={2} justify="start">
-          <Checkbox
-            onCheckedChange={(checked) =>
-              dispatch.settings.setConnectOnClick(Boolean(checked))
-            }
-            checked={connectOnClick}
-          />
-          <Stack direction="column" gap={1} justify="start">
-            <Label>Click to connect</Label>
-            <Text size="xsmall" muted>
-              Allows you to quick connect nodes by clicking on the 2 port.
-            </Text>
+          <Stack direction="row" gap={2} justify="start">
+            <Checkbox
+              onCheckedChange={(checked) =>
+                settings.setInlineValues(Boolean(checked))
+              }
+              checked={settings.inlineValues}
+            />
+            <Stack direction="column" gap={1} justify="start">
+              <Label>Show inline values</Label>
+              <Text size="xsmall" muted>
+                Shows values directly on the node. Useful for debugging but can
+                be cluttered.
+              </Text>
+            </Stack>
           </Stack>
-        </Stack>
-        <Stack direction="row" gap={2} justify="start">
-          <Checkbox
-            onCheckedChange={(checked) =>
-              dispatch.settings.setShowTimings(Boolean(checked))
-            }
-            checked={showTimingsValue}
-          />
-          <Stack direction="column" gap={1} justify="start">
-            <Label>Show execution time</Label>
-            <Text size="xsmall" muted>
-              Shows how long it takes for a node to process.
-            </Text>
+          <Stack direction="row" gap={2} justify="start">
+            <Checkbox
+              onCheckedChange={(checked) =>
+                settings.setDelayedUpdate(Boolean(checked))
+              }
+              checked={settings.delayedUpdate}
+            />
+            <Stack direction="column" gap={1} justify="start">
+              <Label>Use delayed interaction</Label>
+              <Text size="xsmall" muted>
+                Forces a user to click save to update port.
+              </Text>
+            </Stack>
           </Stack>
-        </Stack>
-        <Stack direction="row" gap={2} justify="start">
-          <Checkbox
-            onCheckedChange={(checked) =>
-              dispatch.settings.setShowMinimap(Boolean(checked))
-            }
-            checked={showMinimap}
-          />
-          <Stack direction="column" gap={1} justify="start">
-            <Label>Show Minimap</Label>
-            <Text size="xsmall" muted>
-              Shows the minimap in the graph editing area
-            </Text>
+          <Stack direction="row" gap={2} justify="start">
+            <Checkbox
+              onCheckedChange={(checked) =>
+                settings.setConnectOnClick(Boolean(checked))
+              }
+              checked={settings.connectOnClick}
+            />
+            <Stack direction="column" gap={1} justify="start">
+              <Label>Click to connect</Label>
+              <Text size="xsmall" muted>
+                Allows you to quick connect nodes by clicking on the 2 port.
+              </Text>
+            </Stack>
           </Stack>
-        </Stack>
-        <Stack direction="row" gap={2} justify="start">
-          <Checkbox
-            onCheckedChange={(checked) =>
-              dispatch.ui.setContextMenus(Boolean(checked))
-            }
-            checked={contextMenus}
-          />
-          <Stack direction="column" gap={1} justify="start">
-            <Label>Enable Context Menus</Label>
-            <Text size="xsmall" muted>
-              Provides right click context menus.
-            </Text>
+          <Stack direction="row" gap={2} justify="start">
+            <Checkbox
+              onCheckedChange={(checked) =>
+                settings.setShowTimings(Boolean(checked))
+              }
+              checked={settings.showTimings}
+            />
+            <Stack direction="column" gap={1} justify="start">
+              <Label>Show execution time</Label>
+              <Text size="xsmall" muted>
+                Shows how long it takes for a node to process.
+              </Text>
+            </Stack>
           </Stack>
-        </Stack>
-        <Stack direction="column" gap={6}>
           <Stack direction="row" gap={2} justify="start">
-            <div style={{ width: 'var(--component-spacing-md)' }}></div>
-            <Select
-              value={edgeTypeValue}
-              onValueChange={(value: EdgeType) =>
-                dispatch.settings.setEdgeType(value)
+            <Checkbox
+              onCheckedChange={(checked) =>
+                settings.setShowMinimap(Boolean(checked))
               }
-            >
-              <Select.Trigger label="Edge Type" value={edgeTypeValue} />
-              <Select.Content>
-                {EdgeValues.map((value, index) => {
-                  return (
-                    <Select.Item value={value!} key={index}>
-                      {value}
-                    </Select.Item>
-                  );
-                })}
-              </Select.Content>
-            </Select>
+              checked={settings.showMinimap}
+            />
+            <Stack direction="column" gap={1} justify="start">
+              <Label>Show Minimap</Label>
+              <Text size="xsmall" muted>
+                Shows the minimap in the graph editing area
+              </Text>
+            </Stack>
           </Stack>
           <Stack direction="row" gap={2} justify="start">
-            <div style={{ width: 'var(--component-spacing-md)' }}></div>
-            <Select
-              value={layoutTypeValue}
-              onValueChange={(value: LayoutType) =>
-                dispatch.settings.setLayoutType(value)
+            <Checkbox
+              onCheckedChange={(checked) =>
+                dispatch.ui.setContextMenus(Boolean(checked))
               }
-            >
-              <Select.Trigger label="Layout Type" value={layoutTypeValue} />
-              <Select.Content>
-                {LayoutValues.map((value, index) => {
-                  return (
-                    <Select.Item value={value!} key={index}>
-                      {value}
-                    </Select.Item>
-                  );
-                })}
-              </Select.Content>
-            </Select>
+              checked={contextMenus}
+            />
+            <Stack direction="column" gap={1} justify="start">
+              <Label>Enable Context Menus</Label>
+              <Text size="xsmall" muted>
+                Provides right click context menus.
+              </Text>
+            </Stack>
+          </Stack>
+          <Stack direction="column" gap={6}>
+            <Stack direction="row" gap={2} justify="start">
+              <div style={{ width: 'var(--component-spacing-md)' }}></div>
+              <Select
+                value={settings.edgeType}
+                onValueChange={(value: EdgeType) => settings.setEdgeType(value)}
+              >
+                <Select.Trigger label="Edge Type" value={settings.edgeType} />
+                <Select.Content>
+                  {EdgeValues.map((value, index) => {
+                    return (
+                      <Select.Item value={value!} key={index}>
+                        {value}
+                      </Select.Item>
+                    );
+                  })}
+                </Select.Content>
+              </Select>
+            </Stack>
+            <Stack direction="row" gap={2} justify="start">
+              <div style={{ width: 'var(--component-spacing-md)' }}></div>
+              <Select
+                value={settings.layoutType}
+                onValueChange={(value: LayoutType) =>
+                  settings.setLayoutType(value)
+                }
+              >
+                <Select.Trigger
+                  label="Layout Type"
+                  value={settings.layoutType}
+                />
+                <Select.Content>
+                  {LayoutValues.map((value, index) => {
+                    return (
+                      <Select.Item value={value!} key={index}>
+                        {value}
+                      </Select.Item>
+                    );
+                  })}
+                </Select.Content>
+              </Select>
+            </Stack>
           </Stack>
         </Stack>
-      </Stack>
-    </div>
-  );
-};
+      </div>
+    );
+  },
+);
diff --git a/packages/graph-editor/src/components/panels/unified/index.tsx b/packages/graph-editor/src/components/panels/unified/index.tsx
new file mode 100644
index 000000000..a740cff91
--- /dev/null
+++ b/packages/graph-editor/src/components/panels/unified/index.tsx
@@ -0,0 +1,59 @@
+import {
+  Accordion,
+  Heading,
+  IconButton,
+  Separator,
+  Stack,
+} from '@tokens-studio/ui';
+import { InfoCircle } from 'iconoir-react';
+import { Inputsheet } from '../inputs/index.js';
+import { OutputSheet } from '../output/index.js';
+import { currentNode } from '@/redux/selectors/graph.js';
+import { useGraph } from '@/hooks/useGraph.js';
+import { useSelector } from 'react-redux';
+import React, { useMemo } from 'react';
+import styles from './styles.module.css';
+
+export function UnifiedSheet() {
+  const graph = useGraph();
+  const nodeID = useSelector(currentNode);
+  const selectedNode = useMemo(() => graph?.getNode(nodeID), [graph, nodeID]);
+
+  if (!selectedNode) {
+    return <></>;
+  }
+
+  return (
+    <div className={styles.container}>
+      <Stack direction="column" gap={2} className={styles.inner}>
+        <Stack direction="column" gap={3}>
+          <Stack gap={2} align="start" justify="between">
+            <Heading size="large"> {selectedNode.factory.title}</Heading>
+            <IconButton
+              size="small"
+              tooltip={selectedNode.factory.description}
+              icon={<InfoCircle />}
+            />
+          </Stack>
+        </Stack>
+        <Accordion type="multiple" defaultValue={['inputs', 'outputs']}>
+          <Accordion.Item value="inputs">
+            <Accordion.Trigger>Inputs</Accordion.Trigger>
+            <Accordion.Content>
+              <Separator orientation="horizontal" />
+              <Inputsheet />
+            </Accordion.Content>
+          </Accordion.Item>
+
+          <Accordion.Item value="outputs">
+            <Accordion.Trigger>Outputs</Accordion.Trigger>
+            <Accordion.Content>
+              <Separator orientation="horizontal" />
+              <OutputSheet />
+            </Accordion.Content>
+          </Accordion.Item>
+        </Accordion>
+      </Stack>
+    </div>
+  );
+}
diff --git a/packages/graph-editor/src/components/panels/unified/styles.module.css b/packages/graph-editor/src/components/panels/unified/styles.module.css
new file mode 100644
index 000000000..1569b3c66
--- /dev/null
+++ b/packages/graph-editor/src/components/panels/unified/styles.module.css
@@ -0,0 +1,14 @@
+.container {
+    height: 100%;
+    width: 100%;
+    flex: 1;
+    display: flex;
+    overflow: auto;
+    flex-direction: column;
+}
+
+.inner {
+    height: 100%;
+    flex: 1;
+    padding: var(--component-spacing-md);
+}
\ No newline at end of file
diff --git a/packages/graph-editor/src/components/portPanel/index.tsx b/packages/graph-editor/src/components/portPanel/index.tsx
index 4fcc84818..61088c06d 100644
--- a/packages/graph-editor/src/components/portPanel/index.tsx
+++ b/packages/graph-editor/src/components/portPanel/index.tsx
@@ -6,21 +6,19 @@ import {
   Tooltip,
 } from '@tokens-studio/ui';
 import { Port as GraphPort } from '@tokens-studio/graph-engine';
-import { Input } from '@tokens-studio/graph-engine';
-import { observer } from 'mobx-react-lite';
-import { useSelector } from 'react-redux';
-import React, { useCallback, useMemo } from 'react';
-
 import { IField } from '@/components/controls/interface.js';
 import { InlineTypeLabel } from '@/components/flow/index.js';
-import { controls } from '@/redux/selectors/registry.js';
+import { Input } from '@tokens-studio/graph-engine';
 import { deletable, hidden, resetable } from '@/annotations/index.js';
+import { observer } from 'mobx-react-lite';
 import { useGraph } from '@/hooks/useGraph.js';
+import { useSystem } from '@/system/hook.js';
 import Download from '@tokens-studio/icons/Download.js';
 import Eye from '@tokens-studio/icons/Eye.js';
 import EyeClosed from '@tokens-studio/icons/EyeClosed.js';
 import MoreVert from '@tokens-studio/icons/MoreVert.js';
 import Puzzle from '@tokens-studio/icons/Puzzle.js';
+import React, { useCallback, useMemo } from 'react';
 import Undo from '@tokens-studio/icons/Undo.js';
 import Xmark from '@tokens-studio/icons/Xmark.js';
 import copy from 'copy-to-clipboard';
@@ -30,6 +28,11 @@ export interface IPortPanel {
   readOnly?: boolean;
 }
 
+export interface IPort {
+  port: GraphPort;
+  readOnly?: boolean;
+}
+
 export const PortPanel = observer(({ ports, readOnly }: IPortPanel) => {
   const entries = Object.values(ports).sort();
 
@@ -44,22 +47,24 @@ export const PortPanel = observer(({ ports, readOnly }: IPortPanel) => {
   );
 });
 
-export const Port = observer(({ port, readOnly: isReadOnly }: IField) => {
+export const Port = observer(({ port, readOnly: isReadOnly }: IPort) => {
   const readOnly = isReadOnly || port.isConnected;
-  const controlSelector = useSelector(controls);
+  const sys = useSystem();
   const graph = useGraph();
   const isInput = 'studio.tokens.generic.input' === port.node.factory.type;
   const isDynamicInput = Boolean(port.annotations[deletable]);
   const resettable = Boolean(port.annotations[resetable]);
 
   const inner = useMemo(() => {
-    const field = controlSelector.find((x) => x.matcher(port, { readOnly }));
+    const field = sys.controls.find((x) => x.matcher(port, { readOnly }));
     const Component = field?.component as React.FC<IField>;
 
-    return <Component port={port} readOnly={readOnly} />;
+    return (
+      <Component port={port} readOnly={readOnly} settings={sys.settings} />
+    );
     //We use an explicit dependency on the type
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [controlSelector, port, readOnly, port.type]);
+  }, [sys.controls, port, readOnly, port.type]);
 
   const onClick = useCallback(() => {
     port.setVisible(!port.visible);
diff --git a/packages/graph-editor/src/components/toolbar/dropdowns/add.tsx b/packages/graph-editor/src/components/toolbar/dropdowns/add.tsx
index c71c792c6..79c0e7f82 100644
--- a/packages/graph-editor/src/components/toolbar/dropdowns/add.tsx
+++ b/packages/graph-editor/src/components/toolbar/dropdowns/add.tsx
@@ -1,16 +1,15 @@
 import { Button, DropdownMenu, Stack, Tooltip } from '@tokens-studio/ui';
-import { panelItemsSelector } from '@/redux/selectors/index.js';
 import { useAction } from '@/editor/actions/provider.js';
 import { useDispatch } from '@/hooks/index.js';
 import { useReactFlow } from 'reactflow';
 import { useSelectAddedNodes } from '@/hooks/useSelectAddedNodes.js';
-import { useSelector } from 'react-redux';
+import { useSystem } from '@/system/hook.js';
 import NavArrowRight from '@tokens-studio/icons/NavArrowRight.js';
 import Plus from '@tokens-studio/icons/Plus.js';
 import React, { useCallback } from 'react';
 
 export const AddDropdown = () => {
-  const data = useSelector(panelItemsSelector);
+  const sys = useSystem();
   const createNode = useAction('createNode');
   const reactFlowInstance = useReactFlow();
   const dispatch = useDispatch();
@@ -55,7 +54,7 @@ export const AddDropdown = () => {
   );
 
   const nodes = React.useMemo(() => {
-    return data.groups.map((group) => {
+    return sys.panelItems.groups.map((group) => {
       return (
         <DropdownMenu.Sub key={group.key}>
           <DropdownMenu.SubTrigger>
@@ -82,7 +81,7 @@ export const AddDropdown = () => {
         </DropdownMenu.Sub>
       );
     });
-  }, [data.groups, addNode]);
+  }, [sys.panelItems.groups, addNode]);
 
   return (
     <DropdownMenu onOpenChange={onDropdownOpenChange}>
diff --git a/packages/graph-editor/src/components/toolbar/toolbar.tsx b/packages/graph-editor/src/components/toolbar/toolbar.tsx
index fce1acc44..a89f9443f 100644
--- a/packages/graph-editor/src/components/toolbar/toolbar.tsx
+++ b/packages/graph-editor/src/components/toolbar/toolbar.tsx
@@ -1,12 +1,13 @@
 import * as Toolbar from '@radix-ui/react-toolbar';
-import { ToolBarButtonsSelector } from '@/redux/selectors/index.js';
-import { useSelector } from 'react-redux';
+import { useSystem } from '@/system/hook.js';
 import React from 'react';
 import styles from './toolbar.module.css';
 
 export const GraphToolbar = () => {
-  const toolbarButtons = useSelector(ToolBarButtonsSelector);
-  return <Toolbar.Root className={styles.root}>{toolbarButtons}</Toolbar.Root>;
+  const system = useSystem();
+  return (
+    <Toolbar.Root className={styles.root}>{system.toolbarButtons}</Toolbar.Root>
+  );
 };
 
 export const ToolbarSeparator = ({ className = '', ...props }) => (
diff --git a/packages/graph-editor/src/editor/editorTypes.ts b/packages/graph-editor/src/editor/editorTypes.ts
index e1aede73e..f69893a04 100644
--- a/packages/graph-editor/src/editor/editorTypes.ts
+++ b/packages/graph-editor/src/editor/editorTypes.ts
@@ -1,24 +1,23 @@
 import {
-  CapabilityFactory,
   ExternalLoader,
   Graph,
   Node as GraphNode,
-  NodeLoader,
   SchemaObject,
   SerializedGraph,
 } from '@tokens-studio/graph-engine';
-import { Control } from '../types/controls.js';
-import { DropPanelStore } from '@/components/panels/dropPanel/index.js';
+
 import { Edge, Node, ReactFlowInstance } from 'reactflow';
 import { Menu } from '@/components/menubar/data.js';
-import type { LayoutBase, TabBase, TabData } from 'rc-dock';
+import { System } from '@/system/index.js';
+import type { LayoutBase } from 'rc-dock';
 
 export interface EditorProps {
   id?: string;
 
-  nodeLoader?: NodeLoader;
-  tabLoader?: (tab: TabBase) => TabData | undefined;
-
+  /**
+   * The system to use for the editor
+   */
+  system: System;
   /**
    * A lookup of the custom node types to display in the editor.
    * Not populating this will result in the default items being displayed.
@@ -46,31 +45,6 @@ export interface EditorProps {
    * A custom menu to display in the editor.
    */
   menuItems?: Menu;
-
-  /**
-   * Capabilities to load into the graphs. Each factory is loaded into each graph individually
-   */
-  capabilities?: CapabilityFactory[];
-  /**
-   * Items to display in the drop panel.
-   * Not populating this will result in the default items being displayed.
-   */
-  panelItems: DropPanelStore;
-  /**
-   * Customize the controls that are displayed in the editor
-   */
-  controls?: Control[];
-
-  /**
-   * A lookup of the custom node ui types to display in the editor.
-   */
-  customNodeUI?: Record<string, React.ReactElement>;
-
-  /**
-   * Additional specifics to display in the editor for custom types
-   */
-  specifics?: Record<string, React.FC<{ node: GraphNode }>>;
-
   /**
    * An initial layout to use
    */
@@ -81,10 +55,6 @@ export interface EditorProps {
    */
   schemas?: SchemaObject[];
 
-  /**
-   * Additional icons to display in the editor for custom types
-   */
-  icons?: Record<string, React.ReactNode>;
   /**
    * Additional buttons to display in the toolbar
    */
diff --git a/packages/graph-editor/src/editor/graph.tsx b/packages/graph-editor/src/editor/graph.tsx
index 3e17a7652..380cf0956 100644
--- a/packages/graph-editor/src/editor/graph.tsx
+++ b/packages/graph-editor/src/editor/graph.tsx
@@ -55,19 +55,8 @@ import { NodeV2 } from '@/components/index.js';
 import { PaneContextMenu } from '../components/contextMenus/paneContextMenu.js';
 import { PassthroughNode } from '@/components/flow/nodes/passthroughNode.js';
 import { SelectionContextMenu } from '@/components/contextMenus/selectionContextMenu.js';
-import {
-  capabilitiesSelector,
-  nodeLoaderSelector,
-  panelItemsSelector,
-} from '@/redux/selectors/registry.js';
 import { clear } from './actions/clear.js';
 import { connectNodes } from './actions/connect.js';
-import {
-  connectOnClickSelector,
-  showGrid,
-  showMinimapSelector,
-  snapGrid,
-} from '@/redux/selectors/settings.js';
 import { contextMenuSelector } from '@/redux/selectors/ui.js';
 import { copyNodeAction } from './actions/copyNodes.js';
 import { currentPanelIdSelector } from '@/redux/selectors/graph.js';
@@ -87,6 +76,7 @@ import { useExternalLoader } from '@/context/ExternalLoaderContext.js';
 import { useSelectAddedNodes } from '@/hooks/useSelectAddedNodes.js';
 import { useSelector } from 'react-redux';
 import { useSetCurrentNode } from '@/hooks/useSetCurrentNode.js';
+import { useSystem } from '@/system/hook.js';
 import { version } from '@/data/version.js';
 
 const snapGridCoords: SnapGrid = [16, 16];
@@ -112,15 +102,12 @@ export const EditorApp = React.forwardRef<
   ImperativeEditorRef,
   GraphEditorProps
 >((props: GraphEditorProps, ref) => {
-  const panelItems = useSelector(panelItemsSelector);
-  const nodeLoader = useSelector(nodeLoaderSelector);
-  const { id, customNodeUI = {}, children } = props;
+  const system = useSystem();
+
+  const { id, children } = props;
 
   const externalLoader = useExternalLoader();
-  const showMinimap = useSelector(showMinimapSelector);
-  const capabilities = useSelector(capabilitiesSelector);
   const contextMenus = useSelector(contextMenuSelector);
-  const connectOnClick = useSelector(connectOnClickSelector);
   const reactFlowWrapper = useRef<HTMLDivElement>(null);
   const reactFlowInstance = useReactFlow();
   const dispatch = useDispatch();
@@ -135,8 +122,6 @@ export const EditorApp = React.forwardRef<
   }, []);
   const [graph, setTheGraph] = useState(initialGraph);
 
-  const showGridValue = useSelector(showGrid);
-  const snapGridValue = useSelector(snapGrid);
   const internalRef = useRef<ImperativeEditorRef>(null);
   const activeGraphId = useSelector(currentPanelIdSelector);
 
@@ -146,13 +131,13 @@ export const EditorApp = React.forwardRef<
   }, [graph, externalLoader]);
 
   const iconLookup = useMemo(() => {
-    return panelItems.groups.reduce((acc, group) => {
+    return system.panelItems.groups.reduce((acc, group) => {
       group.items.forEach((item) => {
         acc[item.type] = item.icon || group.icon;
       });
       return acc;
     }, {});
-  }, [panelItems]);
+  }, [system.panelItems.groups]);
 
   const refProxy = useCallback(
     (v) => {
@@ -173,7 +158,7 @@ export const EditorApp = React.forwardRef<
 
   //Attach sideeffect listeners
   useEffect(() => {
-    capabilities.forEach((factory) => graph.registerCapability(factory));
+    system.capabilities.forEach((factory) => graph.registerCapability(factory));
 
     graph.onFinalize('serialize', (serialized) => {
       const nodes = reactFlowInstance.getNodes();
@@ -370,7 +355,7 @@ export const EditorApp = React.forwardRef<
 
   // Create flow node types here, instead of the global scope to ensure that custom nodes added by the user are available in nodeTypes
   const fullNodeTypesRef = useRef({
-    ...customNodeUI,
+    ...system.customNodeUI,
     GenericNode: NodeV2,
     [PASSTHROUGH]: PassthroughNode,
     [EditorNodeTypes.GROUP]: groupNode,
@@ -381,12 +366,12 @@ export const EditorApp = React.forwardRef<
     //Turn it into an O(1) lookup object
     return Object.fromEntries(
       Object.entries({
-        ...customNodeUI,
+        ...system.customNodeUI,
         [NOTE]: NOTE,
         'studio.tokens.generic.preview': 'studio.tokens.generic.preview',
       }).map(([k]) => [k, k]),
     );
-  }, [customNodeUI]);
+  }, [system.customNodeUI]);
 
   const handleDeleteNode = useMemo(() => {
     return deleteNode(graph, dispatch, reactFlowInstance);
@@ -397,7 +382,7 @@ export const EditorApp = React.forwardRef<
       createNode({
         reactFlowInstance,
         graph,
-        nodeLoader,
+        nodeLoader: system.nodeLoader,
         iconLookup,
         customUI: customNodeMap,
         dropPanelPosition,
@@ -406,7 +391,7 @@ export const EditorApp = React.forwardRef<
     [
       reactFlowInstance,
       graph,
-      nodeLoader,
+      system.nodeLoader,
       iconLookup,
       customNodeMap,
       dropPanelPosition,
@@ -429,7 +414,7 @@ export const EditorApp = React.forwardRef<
       },
       loadRaw: async (serializedGraph) => {
         if (internalRef.current) {
-          await graph.deserialize(serializedGraph, nodeLoader);
+          await graph.deserialize(serializedGraph, system.nodeLoader);
           internalRef?.current.load(graph);
         }
       },
@@ -510,7 +495,7 @@ export const EditorApp = React.forwardRef<
     [
       reactFlowInstance,
       graph,
-      nodeLoader,
+      system.nodeLoader,
       setNodes,
       setEdges,
       dispatch.graph,
@@ -596,7 +581,7 @@ export const EditorApp = React.forwardRef<
         x: event.clientX,
         y: event.clientY,
       });
-      const PassthroughFactory = await nodeLoader(PASSTHROUGH);
+      const PassthroughFactory = await system.nodeLoader(PASSTHROUGH);
 
       const newNode = new PassthroughFactory({
         graph,
@@ -658,7 +643,7 @@ export const EditorApp = React.forwardRef<
         return [...filtered, newEdge, newEdge2];
       });
     },
-    [nodeLoader, graph, reactFlowInstance, setEdges, setNodes],
+    [reactFlowInstance, system, graph, setNodes, setEdges],
   );
 
   const onNodeDrag = useCallback(
@@ -701,7 +686,7 @@ export const EditorApp = React.forwardRef<
     reactFlowInstance,
   });
 
-  const copyNodes = copyNodeAction(reactFlowInstance, graph, nodeLoader);
+  const copyNodes = copyNodeAction(reactFlowInstance, graph, system.nodeLoader);
   const selectAddedNodes = useSelectAddedNodes();
 
   const onDrop = useCallback(
@@ -765,10 +750,10 @@ export const EditorApp = React.forwardRef<
               onEdgeDoubleClick={onEdgeDblClick}
               onEdgesDelete={onEdgesDeleted}
               edges={edges}
-              connectOnClick={connectOnClick}
+              connectOnClick={system.settings.connectOnClick}
               elevateNodesOnSelect={true}
               onNodeDragStop={onNodeDragStop}
-              snapToGrid={snapGridValue}
+              snapToGrid={system.settings.snapGrid}
               edgeTypes={edgeTypes}
               nodeTypes={fullNodeTypesRef.current}
               snapGrid={snapGridCoords}
@@ -801,7 +786,7 @@ export const EditorApp = React.forwardRef<
               maxZoom={Infinity}
               proOptions={proOptions}
             >
-              {showGridValue && (
+              {system.settings.showGrid && (
                 <Background
                   color="var(--color-neutral-stroke-subtle)"
                   gap={16}
@@ -812,7 +797,7 @@ export const EditorApp = React.forwardRef<
               {nodeCount === 0 && props.emptyContent}
               {activeGraphId === id && (
                 <CommandMenu
-                  items={panelItems}
+                  items={system.panelItems}
                   handleSelectNewNodeType={handleSelectNewNodeType}
                 />
               )}
@@ -823,7 +808,7 @@ export const EditorApp = React.forwardRef<
             </ReactFlow>
           </HotKeys>
         </div>
-        {showMinimap && <MiniMap />}
+        {system.settings.showMinimap && <MiniMap />}
 
         <PaneContextMenu
           id={props.id + '_pane'}
diff --git a/packages/graph-editor/src/editor/hooks/useAutolayout.ts b/packages/graph-editor/src/editor/hooks/useAutolayout.ts
index db6429860..a3a569744 100644
--- a/packages/graph-editor/src/editor/hooks/useAutolayout.ts
+++ b/packages/graph-editor/src/editor/hooks/useAutolayout.ts
@@ -1,20 +1,16 @@
+import { LayoutType } from '@/system/settings.js';
 import { useCallback } from 'react';
-import { useSelector } from 'react-redux';
-
-import { LayoutType } from '@/redux/models/settings.js';
-import { layoutType as layoutTypeSelector } from '@/redux/selectors/settings.js';
-
 import { useDagreLayout } from '@/layouts/dagre.js';
+import { useSystem } from '@/system/hook.js';
 
 export const useAutoLayout = () => {
+  const system = useSystem();
   const dagreAutoLayout = useDagreLayout();
-  const layoutType = useSelector(layoutTypeSelector);
-
   return useCallback(() => {
-    switch (layoutType) {
+    switch (system.settings.layoutType) {
       case LayoutType.dagre:
         dagreAutoLayout();
         break;
     }
-  }, [dagreAutoLayout, layoutType]);
+  }, [dagreAutoLayout, system.settings.layoutType]);
 };
diff --git a/packages/graph-editor/src/editor/index.tsx b/packages/graph-editor/src/editor/index.tsx
index 80d621908..99ea807a8 100644
--- a/packages/graph-editor/src/editor/index.tsx
+++ b/packages/graph-editor/src/editor/index.tsx
@@ -2,9 +2,8 @@ import { EditorProps, ImperativeEditorRef } from './editorTypes.js';
 import { LayoutController } from './layoutController.js';
 import { ReduxProvider } from '../redux/index.js';
 import { ToastProvider } from '@/hooks/useToast.js';
-import { defaultControls } from '@/registry/control.js';
-import { defaultPanelGroupsFactory } from '@/components/index.js';
-import { defaultSpecifics } from '@/registry/specifics.js';
+
+import { SystemContext } from '@/system/hook.js';
 import React from 'react';
 
 /**
@@ -13,33 +12,16 @@ import React from 'react';
  */
 export const Editor = React.forwardRef<ImperativeEditorRef, EditorProps>(
   (props: EditorProps, ref) => {
-    const {
-      panelItems = defaultPanelGroupsFactory(),
-      capabilities,
-
-      toolbarButtons,
-      schemas,
-      nodeLoader,
-      controls = [...defaultControls],
-      specifics = defaultSpecifics,
-      icons,
-    } = props;
+    const { schemas } = props;
 
     // Note that the provider exists around the layout controller so that the layout controller can register itself during mount
     return (
       <ToastProvider>
-        <ReduxProvider
-          icons={icons}
-          schemas={schemas}
-          controls={controls}
-          panelItems={panelItems}
-          nodeTypes={nodeLoader}
-          specifics={specifics}
-          capabilities={capabilities}
-          toolbarButtons={toolbarButtons}
-        >
-          <LayoutController {...props} ref={ref} />
-        </ReduxProvider>
+        <SystemContext.Provider value={props.system}>
+          <ReduxProvider schemas={schemas}>
+            <LayoutController {...props} ref={ref} />
+          </ReduxProvider>
+        </SystemContext.Provider>
       </ToastProvider>
     );
   },
diff --git a/packages/graph-editor/src/editor/layoutController.tsx b/packages/graph-editor/src/editor/layoutController.tsx
index 30d7a5a6d..122fa814b 100644
--- a/packages/graph-editor/src/editor/layoutController.tsx
+++ b/packages/graph-editor/src/editor/layoutController.tsx
@@ -16,14 +16,14 @@ import { ExternalLoaderProvider } from '@/context/ExternalLoaderContext.js';
 import { FindDialog } from '@/components/dialogs/findDialog.js';
 import { GraphEditor } from './graphEditor.js';
 import { IconButton, Stack, Tooltip } from '@tokens-studio/ui';
-import { Inputsheet } from '@/components/panels/inputs/index.js';
 import { MAIN_GRAPH_ID } from '@/constants.js';
 import { MenuBar, defaultMenuDataFactory } from '@/components/menubar/index.js';
-import { OutputSheet } from '@/components/panels/output/index.js';
+import { UnifiedSheet } from '@/components/panels/unified/index.js';
 import { dockerSelector } from '@/redux/selectors/refs.js';
 import { useDispatch } from '@/hooks/useDispatch.js';
 import { useRegisterRef } from '@/hooks/useRegisterRef.js';
 import { useSelector } from 'react-redux';
+import { useSystem } from '@/system/hook.js';
 import Maximize from '@tokens-studio/icons/Maximize.js';
 import React, { MutableRefObject, useCallback, useEffect } from 'react';
 import Reduce from '@tokens-studio/icons/Reduce.js';
@@ -200,15 +200,7 @@ const defaultLayout: LayoutBase = {
                         size: 12,
                         tabs: [
                           {
-                            id: 'input',
-                          },
-                        ],
-                      },
-                      {
-                        size: 12,
-                        tabs: [
-                          {
-                            id: 'outputs',
+                            id: 'unifiedPorts',
                           },
                         ],
                       },
@@ -225,20 +217,20 @@ const defaultLayout: LayoutBase = {
 };
 
 const layoutLoader = (tab: TabBase, props, ref): TabData => {
-  const { id, ...rest } = tab;
+  const { id } = tab;
 
   switch (id) {
     case 'graphs':
       return {
-        id: 'graphs',
+        ...tab,
         //@ts-expect-error
         size: 700,
         group: 'graph',
         panelLock: { panelStyle: 'graph' },
-        ...rest,
       };
     case MAIN_GRAPH_ID:
       return {
+        ...tab,
         closable: true,
         cached: true,
         group: 'graph',
@@ -250,37 +242,23 @@ const layoutLoader = (tab: TabBase, props, ref): TabData => {
         ),
       };
 
-    case 'input':
+    case 'unifiedPorts':
       return {
+        ...tab,
         closable: true,
         cached: true,
         group: 'popout',
-        id: 'input',
-        title: 'Inputs',
+        title: 'Ports',
         content: (
           <ErrorBoundary fallback={<ErrorBoundaryContent />}>
-            <Inputsheet />
+            <UnifiedSheet />
           </ErrorBoundary>
         ),
       };
-    case 'outputs':
-      return {
-        closable: true,
-        cached: true,
-        group: 'popout',
-        id: 'outputs',
-        title: 'Outputs',
-        content: (
-          <ErrorBoundary fallback={<ErrorBoundaryContent />}>
-            <OutputSheet />
-          </ErrorBoundary>
-        ),
-      };
-
     case 'dropPanel':
       return {
+        ...tab,
         group: 'popout',
-        id: 'dropPanel',
         title: 'Nodes',
         content: (
           <ErrorBoundary fallback={<ErrorBoundaryContent />}>
@@ -300,12 +278,13 @@ export const LayoutController = React.forwardRef<
   EditorProps
 >((props: EditorProps, ref) => {
   const {
-    tabLoader,
     externalLoader,
     initialLayout,
     menuItems = defaultMenuDataFactory(),
   } = props;
 
+  const system = useSystem();
+
   const registerDocker = useRegisterRef<DockLayout>('docker');
   const dispatch = useDispatch();
 
@@ -313,13 +292,13 @@ export const LayoutController = React.forwardRef<
 
   const loadTab = useCallback(
     (tab): TabData => {
-      const loaded = tabLoader?.(tab);
+      const loaded = system.tabLoader?.(tab);
       if (!loaded) {
         return layoutLoader(tab, props, ref);
       }
       return loaded;
     },
-    [tabLoader, props, ref],
+    [system, props, ref],
   );
 
   useEffect(() => {
@@ -332,6 +311,8 @@ export const LayoutController = React.forwardRef<
     //We need to find the graph tab container in the newlayout
     const graphContainer = findGraphPanel(newLayout);
 
+    console.log(graphContainer);
+
     if (graphContainer?.activeId) {
       //Get the active Id to find the currently selected graph
       dispatch.graph.setCurrentPanel(graphContainer.activeId!);
diff --git a/packages/graph-editor/src/index.tsx b/packages/graph-editor/src/index.tsx
index 1207401ef..fa92a3a34 100644
--- a/packages/graph-editor/src/index.tsx
+++ b/packages/graph-editor/src/index.tsx
@@ -19,3 +19,5 @@ export * from './registry/control.js';
 export * from './registry/specifics.js';
 export * from './registry/toolbar.js';
 export * from './types/index.js';
+
+export * from './system/index.js';
diff --git a/packages/graph-editor/src/redux/index.tsx b/packages/graph-editor/src/redux/index.tsx
index fe0d0742e..d0185779a 100644
--- a/packages/graph-editor/src/redux/index.tsx
+++ b/packages/graph-editor/src/redux/index.tsx
@@ -4,20 +4,14 @@ import React, { useEffect } from 'react';
 
 export const ReduxProvider = ({
   children,
-  nodeTypes,
-  panelItems,
-  capabilities,
-  icons,
   schemas,
-  controls,
-  specifics,
-  toolbarButtons,
+  // toolbarButtons,
 }) => {
-  useEffect(() => {
-    if (toolbarButtons) {
-      store.dispatch.registry.setToolbarButtons(toolbarButtons);
-    }
-  }, [toolbarButtons]);
+  // useEffect(() => {
+  //   if (toolbarButtons) {
+  //     store.dispatch.registry.setToolbarButtons(toolbarButtons);
+  //   }
+  // }, [toolbarButtons]);
 
   useEffect(() => {
     if (schemas) {
@@ -25,30 +19,5 @@ export const ReduxProvider = ({
     }
   }, [schemas]);
 
-  useEffect(() => {
-    store.dispatch.registry.registerIcons(icons || {});
-  }, [icons]);
-
-  useEffect(() => {
-    store.dispatch.registry.setControls(controls);
-  }, [controls]);
-
-  useEffect(() => {
-    console.log(nodeTypes);
-    store.dispatch.registry.setNodeTypes(nodeTypes);
-  }, [nodeTypes]);
-
-  useEffect(() => {
-    store.dispatch.registry.setSpecifics(specifics);
-  }, [specifics]);
-
-  useEffect(() => {
-    store.dispatch.registry.setPanelItems(panelItems);
-  }, [panelItems]);
-
-  useEffect(() => {
-    store.dispatch.registry.setCapabilities(capabilities || []);
-  }, [capabilities]);
-
   return <Provider store={store}>{children}</Provider>;
 };
diff --git a/packages/graph-editor/src/redux/models/index.ts b/packages/graph-editor/src/redux/models/index.ts
index 0afb0f6b2..b8d86b01d 100644
--- a/packages/graph-editor/src/redux/models/index.ts
+++ b/packages/graph-editor/src/redux/models/index.ts
@@ -3,12 +3,10 @@ import { RootModel } from './root.js';
 import { graphState } from './graph.js';
 import { refState } from './refs.js';
 import { registryState } from './registry.js';
-import { settingsState } from './settings.js';
 import { uiState } from './ui.js';
 
 export const models: RootModel = {
   graph: graphState,
-  settings: settingsState,
   ui: uiState,
   refs: refState,
   registry: registryState,
diff --git a/packages/graph-editor/src/redux/models/registry.ts b/packages/graph-editor/src/redux/models/registry.ts
index c2b0ed442..c276337fc 100644
--- a/packages/graph-editor/src/redux/models/registry.ts
+++ b/packages/graph-editor/src/redux/models/registry.ts
@@ -1,48 +1,26 @@
 import {
   AllSchemas,
-  CapabilityFactory,
   Node,
   NodeLoader,
   SchemaObject,
 } from '@tokens-studio/graph-engine';
-import { Control } from '@/types/controls.js';
 import { DefaultToolbarButtons } from '@/registry/toolbar.js';
-import {
-  DropPanelStore,
-  defaultPanelGroupsFactory,
-} from '@/components/panels/dropPanel/index.js';
+import { DropPanelStore } from '@/components/panels/dropPanel/index.js';
 import { ReactElement } from 'react';
 import { RootModel } from './root.js';
 import { createModel } from '@rematch/core';
-import { defaultControls } from '@/registry/control.js';
-import { defaultSpecifics } from '@/registry/specifics.js';
-import { icons } from '@/registry/icon.js';
+
 import { inputControls } from '@/registry/inputControls.js';
 
 export interface RegistryState {
-  //Additional specific controls for nodes. Appended to the end of the default controls
-  nodeSpecifics: Record<string, React.FC<{ node: Node }>>;
-  icons: Record<string, React.ReactNode>;
   inputControls: Record<string, React.FC<{ node: Node }>>;
-  controls: Control[];
-  nodeTypes: NodeLoader;
-  panelItems: DropPanelStore;
-  capabilities: CapabilityFactory[];
   toolbarButtons: ReactElement[];
   schemas: SchemaObject[];
 }
 
 export const registryState = createModel<RootModel>()({
   state: {
-    nodeSpecifics: defaultSpecifics,
-    icons: icons(),
     inputControls: { ...inputControls },
-    controls: [...(defaultControls as Control[])],
-    panelItems: defaultPanelGroupsFactory(),
-    nodeTypes: async () => {
-      throw new Error('Node type not found');
-    },
-    capabilities: [],
     toolbarButtons: DefaultToolbarButtons(),
     schemas: AllSchemas,
   } as RegistryState,
@@ -53,48 +31,12 @@ export const registryState = createModel<RootModel>()({
         schemas,
       };
     },
-    setToolbarButtons(state, toolbarButtons: ReactElement[]) {
-      return {
-        ...state,
-        toolbarButtons,
-      };
-    },
-    setCapabilities(state, capabilities: CapabilityFactory[]) {
-      return {
-        ...state,
-        capabilities,
-      };
-    },
     setNodeTypes: (state, nodeTypes: NodeLoader) => {
       return {
         ...state,
         nodeTypes,
       };
     },
-    setSpecifics: (
-      state,
-      nodeSpecifics: Record<string, React.FC<{ node: Node }>>,
-    ) => {
-      return {
-        ...state,
-        nodeSpecifics,
-      };
-    },
-    setControls(state, controls: Control[]) {
-      return {
-        ...state,
-        controls,
-      };
-    },
-    registerIcons(state, payload: Record<string, React.ReactNode>) {
-      return {
-        ...state,
-        icons: {
-          ...state.icons,
-          ...payload,
-        },
-      };
-    },
     registerInputControl(
       state,
       payload: { key: string; value: React.FC<{ node: Node }> },
diff --git a/packages/graph-editor/src/redux/models/root.ts b/packages/graph-editor/src/redux/models/root.ts
index df2bbe604..e586803e0 100644
--- a/packages/graph-editor/src/redux/models/root.ts
+++ b/packages/graph-editor/src/redux/models/root.ts
@@ -2,11 +2,9 @@ import { Models } from '@rematch/core';
 import { graphState } from './graph.js';
 import { refState } from './refs.js';
 import { registryState } from './registry.js';
-import { settingsState } from './settings.js';
 import { uiState } from './ui.js';
 
 export interface RootModel extends Models<RootModel> {
-  settings: typeof settingsState;
   ui: typeof uiState;
   graph: typeof graphState;
   refs: typeof refState;
diff --git a/packages/graph-editor/src/redux/models/settings.ts b/packages/graph-editor/src/redux/models/settings.ts
deleted file mode 100644
index b9ff22b05..000000000
--- a/packages/graph-editor/src/redux/models/settings.ts
+++ /dev/null
@@ -1,133 +0,0 @@
-import { RootModel } from './root.js';
-import { createModel } from '@rematch/core';
-
-export enum EdgeType {
-  bezier = 'Bezier',
-  smoothStep = 'Smooth step',
-  straight = 'Straight',
-  simpleBezier = 'Simple Bezier',
-}
-export enum LayoutType {
-  dagre = 'Dagre',
-  elkForce = 'Elk - Force',
-  elkRect = 'Elk - Rect',
-  elkLayered = 'Elk - Layered',
-  elkStress = 'Elk - Stress',
-}
-
-export interface SettingsState {
-  edgeType: EdgeType;
-  layoutType: LayoutType;
-  debugMode: boolean;
-  showTimings: boolean;
-  showMinimap: boolean;
-  showGrid: boolean;
-  showSearch: boolean;
-  /**
-   * Whether to delay the update of a node when a value is changed
-   */
-  delayedUpdate: boolean;
-  /**
-   * Whether to show the types inline with the nodes
-   */
-  inlineTypes: boolean;
-  /**
-   * Whether to show the values inline with the nodes
-   */
-  inlineValues: boolean;
-  connectOnClick: boolean;
-  snapGrid: boolean;
-}
-
-export const settingsState = createModel<RootModel>()({
-  state: {
-    edgeType: EdgeType.bezier,
-    layoutType: LayoutType.dagre,
-    showGrid: true,
-    connectOnClick: true,
-    showTimings: false,
-    showSearch: false,
-    inlineTypes: false,
-    inlineValues: false,
-    snapGrid: false,
-    debugMode: false,
-    showMinimap: false,
-    delayedUpdate: false,
-  } as SettingsState,
-  reducers: {
-    setConnectOnClick(state, connectOnClick: boolean) {
-      return {
-        ...state,
-        connectOnClick,
-      };
-    },
-    setShowSearch(state, showSearch: boolean) {
-      return {
-        ...state,
-        showSearch,
-      };
-    },
-    setShowMinimap(state, showMinimap: boolean) {
-      return {
-        ...state,
-        showMinimap,
-      };
-    },
-
-    setDelayedUpdate(state, delayedUpdate: boolean) {
-      return {
-        ...state,
-        delayedUpdate,
-      };
-    },
-
-    setSnapGrid(state, snapGrid: boolean) {
-      return {
-        ...state,
-        snapGrid,
-      };
-    },
-    setShowGrid(state, showGrid: boolean) {
-      return {
-        ...state,
-        showGrid,
-      };
-    },
-    setDebugMode(state, debugMode: boolean) {
-      return {
-        ...state,
-        debugMode,
-      };
-    },
-    setInlineTypes(state, inlineTypes: boolean) {
-      return {
-        ...state,
-        inlineTypes,
-      };
-    },
-    setInlineValues(state, inlineValues: boolean) {
-      return {
-        ...state,
-        inlineValues,
-      };
-    },
-    setEdgeType(state, edgeType: EdgeType) {
-      return {
-        ...state,
-        edgeType,
-      };
-    },
-    setShowTimings(state, showTimings: boolean) {
-      return {
-        ...state,
-        showTimings,
-      };
-    },
-    setLayoutType(state, layoutType: LayoutType) {
-      return {
-        ...state,
-        layoutType,
-      };
-    },
-  },
-});
diff --git a/packages/graph-editor/src/redux/selectors/index.ts b/packages/graph-editor/src/redux/selectors/index.ts
index 9365f451f..40ee7fda4 100644
--- a/packages/graph-editor/src/redux/selectors/index.ts
+++ b/packages/graph-editor/src/redux/selectors/index.ts
@@ -2,5 +2,4 @@ export * from './graph.js';
 export * from './refs.js';
 export * from './roots.js';
 export * from './registry.js';
-export * from './settings.js';
 export * from './ui.js';
diff --git a/packages/graph-editor/src/redux/selectors/registry.ts b/packages/graph-editor/src/redux/selectors/registry.ts
index 478de24d5..cfdad6d63 100644
--- a/packages/graph-editor/src/redux/selectors/registry.ts
+++ b/packages/graph-editor/src/redux/selectors/registry.ts
@@ -1,32 +1,10 @@
 import { createSelector } from 'reselect';
 import { registry } from './roots.js';
 
-export const icons = createSelector(registry, (state) => state.icons);
 export const inputControls = createSelector(
   registry,
   (state) => state.inputControls,
 );
-export const controls = createSelector(registry, (state) => state.controls);
-
-export const nodeSpecifics = createSelector(
-  registry,
-  (state) => state.nodeSpecifics,
-);
-
-export const panelItemsSelector = createSelector(
-  registry,
-  (state) => state.panelItems,
-);
-
-export const capabilitiesSelector = createSelector(
-  registry,
-  (state) => state.capabilities,
-);
-
-export const nodeLoaderSelector = createSelector(
-  registry,
-  (state) => state.nodeTypes,
-);
 
 export const ToolBarButtonsSelector = createSelector(
   registry,
diff --git a/packages/graph-editor/src/redux/selectors/roots.ts b/packages/graph-editor/src/redux/selectors/roots.ts
index abcf184a6..dbc75ccff 100644
--- a/packages/graph-editor/src/redux/selectors/roots.ts
+++ b/packages/graph-editor/src/redux/selectors/roots.ts
@@ -1,5 +1,4 @@
 import { RootState } from '../store.js';
-export const settings = (state: RootState) => state.settings;
 export const ui = (state: RootState) => state.ui;
 export const graph = (state: RootState) => state.graph;
 export const refs = (state: RootState) => state.refs;
diff --git a/packages/graph-editor/src/redux/selectors/settings.ts b/packages/graph-editor/src/redux/selectors/settings.ts
deleted file mode 100644
index f1685b829..000000000
--- a/packages/graph-editor/src/redux/selectors/settings.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { createSelector } from 'reselect';
-import { settings } from './roots.js';
-
-export const edgeType = createSelector(settings, (state) => state.edgeType);
-
-export const layoutType = createSelector(settings, (state) => state.layoutType);
-
-export const debugMode = createSelector(settings, (state) => state.debugMode);
-export const inlineTypes = createSelector(
-  settings,
-  (state) => state.inlineTypes,
-);
-export const inlineValues = createSelector(
-  settings,
-  (state) => state.inlineValues,
-);
-
-export const showGrid = createSelector(settings, (state) => state.showGrid);
-
-export const snapGrid = createSelector(settings, (state) => state.snapGrid);
-export const showTimings = createSelector(
-  settings,
-  (state) => state.showTimings,
-);
-
-export const showMinimapSelector = createSelector(
-  settings,
-  (state) => state.showMinimap,
-);
-
-export const delayedUpdateSelector = createSelector(
-  settings,
-  (state) => state.delayedUpdate,
-);
-export const showSearchSelector = createSelector(
-  settings,
-  (state) => state.showSearch,
-);
-export const connectOnClickSelector = createSelector(
-  settings,
-  (state) => state.connectOnClick,
-);
diff --git a/packages/graph-editor/src/redux/store.tsx b/packages/graph-editor/src/redux/store.tsx
index 3ec8c5195..fef9bacef 100644
--- a/packages/graph-editor/src/redux/store.tsx
+++ b/packages/graph-editor/src/redux/store.tsx
@@ -3,7 +3,6 @@ import { RefState } from './models/refs.js';
 import { RegistryState } from './models/registry.js';
 import { RematchDispatch, init } from '@rematch/core';
 import { RootModel, models } from './models/index.js';
-import { SettingsState } from './models/settings.js';
 import { UIState } from './models/ui.js';
 
 export const store = init({
@@ -20,7 +19,6 @@ export const store = init({
 export type Dispatch = RematchDispatch<RootModel>;
 export type RootState = {
   graph: GraphState;
-  settings: SettingsState;
   ui: UIState;
   refs: RefState;
   registry: RegistryState;
diff --git a/packages/graph-editor/src/registry/icon.tsx b/packages/graph-editor/src/registry/icon.tsx
index aa2014ad7..bb5b2a4b1 100644
--- a/packages/graph-editor/src/registry/icon.tsx
+++ b/packages/graph-editor/src/registry/icon.tsx
@@ -20,7 +20,7 @@ import Text from '@tokens-studio/icons/Text.js';
  * Default icons for the graph editor
  * These icons are used to represent the different types of custom types in the graph editor
  */
-export const icons = () =>
+export const iconsFactory = () =>
   ({
     [COLOR]: <Droplet />,
     [CURVE]: <EaseCurveControlPoints />,
diff --git a/packages/graph-editor/src/system/hook.tsx b/packages/graph-editor/src/system/hook.tsx
new file mode 100644
index 000000000..3cb2d0cdb
--- /dev/null
+++ b/packages/graph-editor/src/system/hook.tsx
@@ -0,0 +1,8 @@
+import { System } from './index.js';
+import { createContext, useContext } from 'react';
+
+export const SystemContext = createContext<System | undefined>(undefined);
+
+export const useSystem = (): System => {
+  return useContext(SystemContext)!;
+};
diff --git a/packages/graph-editor/src/system/index.tsx b/packages/graph-editor/src/system/index.tsx
new file mode 100644
index 000000000..e79a90b5c
--- /dev/null
+++ b/packages/graph-editor/src/system/index.tsx
@@ -0,0 +1,98 @@
+import {
+  CapabilityFactory,
+  Node,
+  NodeLoader,
+} from '@tokens-studio/graph-engine';
+import { Control } from '@/types/controls.js';
+import { DefaultToolbarButtons } from '@/registry/toolbar.js';
+import { DropPanelStore } from '@/components/index.js';
+import { SystemSettings } from './settings.js';
+import { TabBase, TabData } from 'rc-dock';
+import { defaultSpecifics } from '@/registry/specifics.js';
+import { iconsFactory } from '@/registry/icon.js';
+import { makeAutoObservable } from 'mobx';
+import React from 'react';
+
+export type TabLoader = (tab: TabBase) => TabData | undefined;
+
+export interface ISystem {
+  /**
+   * Items to display in the drop panel.
+   * Not populating this will result in the default items being displayed.
+   */
+  panelItems?: DropPanelStore;
+  /**
+   * Customize the controls that are displayed in the editor
+   */
+  controls?: Control[];
+  /**
+   * Additional specifics to display in the editor for custom types
+   */
+  specifics?: Record<
+    string,
+    React.FC<{
+      node: Node;
+    }>
+  >;
+  /**
+   * The loader for nodes to display in the editor
+   */
+  nodeLoader: NodeLoader;
+  /**
+   * The loader for tabs to display in the editor
+   */
+  tabLoader: TabLoader;
+  /**
+   * Capabilities to load into the graphs. Each factory is loaded into each graph individually.
+   */
+  capabilities?: CapabilityFactory[];
+  /**
+   * A lookup of the custom node ui types to display in the editor.
+   */
+  customNodeUI?: Record<string, React.ReactElement>;
+  /**
+   * An icon lookup to be used for legends, etc
+   */
+  icons?: Record<string, React.ReactNode>;
+
+  settings?: SystemSettings;
+
+  /**
+   * Additional buttons to display in the toolbar
+   */
+  toolbarButtons?: React.ReactElement[];
+}
+
+export class System {
+  specifics!: Record<
+    string,
+    React.FC<{
+      node: Node;
+    }>
+  >;
+  nodeLoader!: NodeLoader;
+  tabLoader!: TabLoader;
+  panelItems!: DropPanelStore;
+  capabilities!: CapabilityFactory[];
+  customNodeUI!: Record<string, React.ReactElement>;
+  controls!: Control[];
+  settings!: SystemSettings;
+  icons!: Record<string, React.ReactNode>;
+  toolbarButtons!: React.ReactElement[];
+
+  constructor(config: ISystem) {
+    const defaultConfig: Partial<ISystem> = {
+      specifics: defaultSpecifics,
+      panelItems: new DropPanelStore([]),
+      capabilities: [],
+      customNodeUI: {},
+      controls: [],
+      icons: iconsFactory(),
+      settings: new SystemSettings({}),
+      toolbarButtons: DefaultToolbarButtons(),
+    };
+
+    Object.assign(this, defaultConfig, config);
+    makeAutoObservable(this);
+  }
+}
diff --git a/packages/graph-editor/src/system/settings.tsx b/packages/graph-editor/src/system/settings.tsx
new file mode 100644
index 000000000..3527ecefc
--- /dev/null
+++ b/packages/graph-editor/src/system/settings.tsx
@@ -0,0 +1,91 @@
+import { makeAutoObservable } from 'mobx';
+
+export enum EdgeType {
+  bezier = 'Bezier',
+  smoothStep = 'Smooth step',
+  straight = 'Straight',
+  simpleBezier = 'Simple Bezier',
+}
+export enum LayoutType {
+  dagre = 'Dagre',
+  elkForce = 'Elk - Force',
+  elkRect = 'Elk - Rect',
+  elkLayered = 'Elk - Layered',
+  elkStress = 'Elk - Stress',
+}
+
+export class SystemSettings {
+  edgeType: EdgeType = EdgeType.bezier;
+  layoutType: LayoutType = LayoutType.dagre;
+  debugMode: boolean = false;
+  showTimings: boolean = false;
+  showMinimap: boolean = false;
+  showGrid: boolean = true;
+  showSearch: boolean = false;
+  /**
+   * Whether to delay the update of a node when a value is changed
+   */
+  delayedUpdate: boolean = false;
+  /**
+   * Whether to show the types inline with the nodes
+   */
+  inlineTypes: boolean = false;
+  /**
+   * Whether to show the values inline with the nodes
+   */
+  inlineValues: boolean = false;
+  connectOnClick: boolean = true;
+  snapGrid: boolean = false;
+
+  constructor(config: Partial<SystemSettings>) {
+    makeAutoObservable(this);
+    Object.assign(this, config);
+  }
+  setEdgeType(edgeType: EdgeType) {
+    this.edgeType = edgeType;
+  }
+
+  setLayoutType(layoutType: LayoutType) {
+    this.layoutType = layoutType;
+  }
+
+  setDebugMode(debugMode: boolean) {
+    this.debugMode = debugMode;
+  }
+
+  setShowTimings(showTimings: boolean) {
+    this.showTimings = showTimings;
+  }
+
+  setShowMinimap(showMinimap: boolean) {
+    this.showMinimap = showMinimap;
+  }
+
+  setShowGrid(showGrid: boolean) {
+    this.showGrid = showGrid;
+  }
+
+  setShowSearch(showSearch: boolean) {
+    this.showSearch = showSearch;
+  }
+
+  setDelayedUpdate(delayedUpdate: boolean) {
+    this.delayedUpdate = delayedUpdate;
+  }
+
+  setInlineTypes(inlineTypes: boolean) {
+    this.inlineTypes = inlineTypes;
+  }
+
+  setInlineValues(inlineValues: boolean) {
+    this.inlineValues = inlineValues;
+  }
+
+  setConnectOnClick(connectOnClick: boolean) {
+    this.connectOnClick = connectOnClick;
+  }
+
+  setSnapGrid(snapGrid: boolean) {
+    this.snapGrid = snapGrid;
+  }
+}
diff --git a/packages/nodes-design-tokens/src/ui/controls/tokenArray.tsx b/packages/nodes-design-tokens/src/ui/controls/tokenArray.tsx
index 49d534d5d..5375f54d5 100644
--- a/packages/nodes-design-tokens/src/ui/controls/tokenArray.tsx
+++ b/packages/nodes-design-tokens/src/ui/controls/tokenArray.tsx
@@ -1,5 +1,9 @@
 import { Accordion, Button, Separator, Stack } from '@tokens-studio/ui';
-import { IField, IResolvedToken, flatTokensRestoreToMap } from '@tokens-studio/graph-editor';
+import {
+	IField,
+	IResolvedToken,
+	flatTokensRestoreToMap
+} from '@tokens-studio/graph-editor';
 import { Token } from './token.js';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
@@ -12,41 +16,43 @@ interface TokenArrayFieldInnerProps {
 	value: IResolvedToken[];
 }
 
-export const TokenArrayFieldInner = observer(({ value }: TokenArrayFieldInnerProps) => {
-	const downloadTokens = () => {
-		const element = document.createElement('a');
-		const asObj = flatTokensRestoreToMap(value);
-		const file = new Blob([JSON.stringify(asObj)], {
-			type: 'application/json'
-		});
-		element.href = URL.createObjectURL(file);
-		element.download = 'tokens.json';
-		document.body.appendChild(element);
-		element.click();
-	};
+export const TokenArrayFieldInner = observer(
+	({ value }: TokenArrayFieldInnerProps) => {
+		const downloadTokens = () => {
+			const element = document.createElement('a');
+			const asObj = flatTokensRestoreToMap(value);
+			const file = new Blob([JSON.stringify(asObj)], {
+				type: 'application/json'
+			});
+			element.href = URL.createObjectURL(file);
+			element.download = 'tokens.json';
+			document.body.appendChild(element);
+			element.click();
+		};
 
-	return (
-		<Stack gap={4} direction='column' align='center'>
-			<Accordion type='multiple' defaultValue={['tokens']}>
-				<Accordion.Item value='tokens'>
-					<Accordion.Trigger>Tokens</Accordion.Trigger>
-					<Separator orientation='horizontal' />
-					<Accordion.Content>
-						<Stack
-							gap={4}
-							direction='column'
-							align='center'
-							style={{ padding: 'var(--component-spacing-md)' }}
-						>
-							{(value || []).map(token => (
-								<Token token={token} key={token.name} />
-							))}
-						</Stack>
-					</Accordion.Content>
-				</Accordion.Item>
-			</Accordion>
+		return (
+			<Stack gap={4} direction='column' align='center'>
+				<Accordion type='multiple' defaultValue={['tokens']}>
+					<Accordion.Item value='tokens'>
+						<Accordion.Trigger>Tokens</Accordion.Trigger>
+						<Separator orientation='horizontal' />
+						<Accordion.Content>
+							<Stack
+								gap={4}
+								direction='column'
+								align='center'
+								style={{ padding: 'var(--component-spacing-md)' }}
+							>
+								{(value || []).map(token => (
+									<Token token={token} key={token.name} />
+								))}
+							</Stack>
+						</Accordion.Content>
+					</Accordion.Item>
+				</Accordion>
 
-			<Button onClick={downloadTokens}>Download</Button>
-		</Stack>
-	);
-});
+				<Button onClick={downloadTokens}>Download</Button>
+			</Stack>
+		);
+	}
+);
diff --git a/packages/ui/src/components/editor/index.tsx b/packages/ui/src/components/editor/index.tsx
index fbad68143..601792722 100644
--- a/packages/ui/src/components/editor/index.tsx
+++ b/packages/ui/src/components/editor/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Editor } from '@tokens-studio/graph-editor';
+import { Editor, System } from '@tokens-studio/graph-editor';
 import { EmptyStateEditor } from '../EmptyStateEditor.tsx';
 import { ExamplesPicker } from '../ExamplesPicker.tsx';
 import {
@@ -8,7 +8,6 @@ import {
 	controls,
 	icons,
 	menu,
-	nodeTypes,
 	panelItems,
 	specifics
 } from './data.tsx';
@@ -16,7 +15,7 @@ import { loadCompounds } from '@/data/compounds/index.tsx';
 import { observer } from 'mobx-react-lite';
 import { tabLoader } from './tabLoader.tsx';
 import { useGetEditor } from '@/hooks/useGetEditor.ts';
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import Spinner from '../spinner/index.tsx';
 import globalState from '@/mobx/index.tsx';
 import initialLayout from '@/data/layout/default.json';
@@ -24,13 +23,12 @@ import styles from './styles.module.css';
 import type { LayoutBase } from 'rc-dock';
 import type { ReactElement } from 'react';
 
-
 export const EditorTab = observer(
 	(
 		{
 			loading,
 			toolbarButtons
-		}: { loading?: boolean; toolbarButtons?: ReactElement },
+		}: { loading?: boolean; toolbarButtons?: ReactElement[] },
 		ref
 	) => {
 		const { loadExample } = useGetEditor();
@@ -42,24 +40,29 @@ export const EditorTab = observer(
 			globalState.ui.showExamplePicker = true;
 		}, []);
 
+		const sys = useMemo(() => {
+			return new System({
+				specifics,
+				panelItems,
+				tabLoader,
+				nodeLoader: loadCompounds,
+				capabilities,
+				controls,
+				icons,
+				toolbarButtons
+			});
+		}, []);
+
 		return (
 			<div className={styles.container}>
 				<Editor
 					id={''}
 					// @ts-ignore
+					system={sys}
 					ref={ref}
 					showMenu={false}
 					menuItems={menu}
 					initialLayout={initialLayout as unknown as LayoutBase}
-					panelItems={panelItems}
-					nodeTypes={nodeTypes}
-					nodeLoader={loadCompounds}
-					capabilities={capabilities}
-					tabLoader={tabLoader}
-					controls={controls}
-					specifics={specifics}
-					icons={icons}
-					toolbarButtons={toolbarButtons}
 					emptyContent={
 						<EmptyStateEditor onLoadExamples={onOpenExamplePicker} />
 					}
diff --git a/packages/ui/src/data/layout/default.json b/packages/ui/src/data/layout/default.json
index 26bbd6bc3..255d66338 100644
--- a/packages/ui/src/data/layout/default.json
+++ b/packages/ui/src/data/layout/default.json
@@ -42,22 +42,11 @@
 						"size": 12,
 						"tabs": [
 							{
-								"id": "input"
+								"id": "unifiedPorts"
 							}
 						],
 						"group": "popout",
-						"activeId": "input"
-					},
-					{
-						"id": "+26",
-						"size": 12,
-						"tabs": [
-							{
-								"id": "outputs"
-							}
-						],
-						"group": "popout",
-						"activeId": "outputs"
+						"activeId": "unifiedPorts"
 					}
 				]
 			}

From 83753c92b4293242690b9fac68bce36109c28c6b Mon Sep 17 00:00:00 2001
From: SorsOps <80043879+sorsOps@users.noreply.github.com>
Date: Tue, 21 Jan 2025 14:30:00 +0200
Subject: [PATCH 04/10] Start implementing frames

---
 .changeset/giant-steaks-jump.md               |   6 +
 .changeset/wild-cars-kiss.md                  |  16 ++
 .../contextMenus/paneContextMenu.tsx          |  14 +-
 .../src/components/controls/interface.tsx     |   2 +-
 .../src/components/dialogs/findDialog.tsx     |   8 +-
 .../src/components/flow/edges/edge.tsx        |   8 +-
 .../components/flow/nodes/passthroughNode.tsx |   6 +-
 .../src/components/flow/wrapper/nodeV2.tsx    |  22 +--
 .../src/components/hotKeys/index.tsx          |  14 +-
 .../components/panels/dropPanel/dropPanel.tsx |   6 +-
 .../src/components/panels/legend/index.tsx    |   6 +-
 .../src/components/panels/settings/index.tsx  |   8 +-
 .../src/components/portPanel/index.tsx        |  10 +-
 .../src/components/toolbar/dropdowns/add.tsx  |   8 +-
 .../src/components/toolbar/toolbar.tsx        |   6 +-
 .../src/context/ExternalDataContext.tsx       |  54 ------
 .../src/context/ExternalLoaderContext.tsx     |  28 ---
 packages/graph-editor/src/context/index.ts    |   1 -
 packages/graph-editor/src/data/version.ts     |   2 +-
 .../graph-editor/src/editor/editorTypes.ts    |  12 --
 packages/graph-editor/src/editor/graph.tsx    |  63 +++---
 .../src/editor/hooks/useAutolayout.ts         |   6 +-
 .../src/editor/layoutController.tsx           |  11 +-
 packages/graph-editor/src/index.tsx           |   2 +-
 .../graph-editor/src/redux/models/registry.ts |  30 ---
 .../src/redux/selectors/registry.ts           |   4 -
 .../graph-editor/src/system/frame/hook.tsx    |   8 +
 .../graph-editor/src/system/frame/index.tsx   | 104 ++++++++++
 .../src/system/{ => frame}/settings.tsx       |   0
 packages/graph-editor/src/system/index.tsx    | 109 +++--------
 packages/ui/src/app/editor/page.tsx           |   2 +-
 packages/ui/src/components/editor/index.tsx   |  24 ++-
 packages/ui/src/components/editor/toolbar.tsx | 181 ------------------
 .../ui/src/components/editor/toolbar/ai.tsx   |  27 +++
 .../src/components/editor/toolbar/index.tsx   | 107 +++++++++++
 .../src/components/editor/toolbar/share.tsx   |  62 ++++++
 36 files changed, 458 insertions(+), 519 deletions(-)
 create mode 100644 .changeset/giant-steaks-jump.md
 create mode 100644 .changeset/wild-cars-kiss.md
 delete mode 100644 packages/graph-editor/src/context/ExternalDataContext.tsx
 delete mode 100644 packages/graph-editor/src/context/ExternalLoaderContext.tsx
 delete mode 100644 packages/graph-editor/src/context/index.ts
 create mode 100644 packages/graph-editor/src/system/frame/hook.tsx
 create mode 100644 packages/graph-editor/src/system/frame/index.tsx
 rename packages/graph-editor/src/system/{ => frame}/settings.tsx (100%)
 delete mode 100644 packages/ui/src/components/editor/toolbar.tsx
 create mode 100644 packages/ui/src/components/editor/toolbar/ai.tsx
 create mode 100644 packages/ui/src/components/editor/toolbar/index.tsx
 create mode 100644 packages/ui/src/components/editor/toolbar/share.tsx

diff --git a/.changeset/giant-steaks-jump.md b/.changeset/giant-steaks-jump.md
new file mode 100644
index 000000000..39fecd6e2
--- /dev/null
+++ b/.changeset/giant-steaks-jump.md
@@ -0,0 +1,6 @@
+---
+"@tokens-studio/graph-editor": major
+---
+
+Removed `initialGraph` from the editor. This can now be passed through with the Frame.graph option instead  
+
diff --git a/.changeset/wild-cars-kiss.md b/.changeset/wild-cars-kiss.md
new file mode 100644
index 000000000..529b3c565
--- /dev/null
+++ b/.changeset/wild-cars-kiss.md
@@ -0,0 +1,16 @@
+---
+"@tokens-studio/graph-editor": major
+---
+
+Removes the External Loader from the editor as this will likely be scoped per Frame
+
+You should instead attach your external loader directly to the graph you created when creating a frame
+
+```ts
+const graph = new Graph();
+
+graph.externaloLoader = myExternalLoader;
+
+const Frame = new Frame({ graph , ...etc})
+
+```
diff --git a/packages/graph-editor/src/components/contextMenus/paneContextMenu.tsx b/packages/graph-editor/src/components/contextMenus/paneContextMenu.tsx
index 12b62d453..f828b14f5 100644
--- a/packages/graph-editor/src/components/contextMenus/paneContextMenu.tsx
+++ b/packages/graph-editor/src/components/contextMenus/paneContextMenu.tsx
@@ -4,9 +4,9 @@ import { clear } from '../../editor/actions/clear.js';
 import { useAction } from '@/editor/actions/provider.js';
 import { useAutoLayout } from '../../editor/hooks/useAutolayout.js';
 import { useDispatch } from '@/hooks/index.js';
+import { useFrame } from '@/system/frame/hook.js';
 import { useLocalGraph } from '@/context/graph.js';
 import { useReactFlow } from 'reactflow';
-import { useSystem } from '@/system/hook.js';
 import React, { useCallback } from 'react';
 
 export interface IPaneContextMenu<T = unknown> {
@@ -17,7 +17,7 @@ export interface IPaneContextMenu<T = unknown> {
 export const PaneContextMenu = <T = unknown,>({ id }: IPaneContextMenu<T>) => {
   const reactFlowInstance = useReactFlow();
 
-  const system = useSystem();
+  const frame = useFrame();
   const dispatch = useDispatch();
   const graph = useLocalGraph();
   const createNode = useAction('createNode');
@@ -50,12 +50,12 @@ export const PaneContextMenu = <T = unknown,>({ id }: IPaneContextMenu<T>) => {
   }, [reactFlowInstance]);
 
   const setShowGrid = useCallback(() => {
-    system.settings.setShowGrid(!system.settings.showGrid);
-  }, [system.settings]);
+    frame.settings.setShowGrid(!frame.settings.showGrid);
+  }, [frame.settings]);
 
   const setSnapGrid = useCallback(() => {
-    system.settings.setSnapGrid(!system.settings.snapGrid);
-  }, [system.settings]);
+    frame.settings.setSnapGrid(!frame.settings.snapGrid);
+  }, [frame.settings]);
 
   const clearCallback = useCallback(() => {
     clear(reactFlowInstance, graph);
@@ -69,7 +69,7 @@ export const PaneContextMenu = <T = unknown,>({ id }: IPaneContextMenu<T>) => {
       <Separator />
       <ContextMenuItem onClick={layout}>Apply Layout</ContextMenuItem>
       <ContextMenuItem onClick={setShowGrid}>
-        {system.settings.showGrid ? 'Hide' : 'Show'} Grid
+        {frame.settings.showGrid ? 'Hide' : 'Show'} Grid
       </ContextMenuItem>
       <ContextMenuItem onClick={recenter}>Recenter</ContextMenuItem>
       <Separator />
diff --git a/packages/graph-editor/src/components/controls/interface.tsx b/packages/graph-editor/src/components/controls/interface.tsx
index 64ef95932..d05d7682d 100644
--- a/packages/graph-editor/src/components/controls/interface.tsx
+++ b/packages/graph-editor/src/components/controls/interface.tsx
@@ -1,5 +1,5 @@
 import { Port } from '@tokens-studio/graph-engine';
-import { SystemSettings } from '@/system/settings.js';
+import { SystemSettings } from '@/system/frame/settings.js';
 export interface IField {
   port: Port;
   readOnly?: boolean;
diff --git a/packages/graph-editor/src/components/dialogs/findDialog.tsx b/packages/graph-editor/src/components/dialogs/findDialog.tsx
index 5525503b2..07fad3b88 100644
--- a/packages/graph-editor/src/components/dialogs/findDialog.tsx
+++ b/packages/graph-editor/src/components/dialogs/findDialog.tsx
@@ -1,9 +1,9 @@
 import { Button, Dialog, IconButton, Text, TextInput } from '@tokens-studio/ui';
 import { title as annotatedTitle } from '@/annotations/index.js';
 import { graphEditorSelector } from '@/redux/selectors/index.js';
+import { useFrame } from '@/system/frame/hook.js';
 import { useGraph } from '@/hooks/index.js';
 import { useSelector } from 'react-redux';
-import { useSystem } from '@/system/hook.js';
 import React from 'react';
 import Xmark from '@tokens-studio/icons/Xmark.js';
 
@@ -12,10 +12,10 @@ export const FindDialog = () => {
   const [title, setTitle] = React.useState('');
   const localGraph = useGraph();
   const graph = useSelector(graphEditorSelector);
-  const system = useSystem();
+  const frame = useFrame();
 
   const setOpen = (value: boolean) => {
-    system.settings.setShowSearch(value);
+    frame.settings.setShowSearch(value);
   };
 
   const onClick = () => {
@@ -62,7 +62,7 @@ export const FindDialog = () => {
   };
 
   return (
-    <Dialog open={system.settings.showSearch} onOpenChange={setOpen}>
+    <Dialog open={frame.settings.showSearch} onOpenChange={setOpen}>
       <Dialog.Portal>
         <Dialog.Overlay />
         <Dialog.Content>
diff --git a/packages/graph-editor/src/components/flow/edges/edge.tsx b/packages/graph-editor/src/components/flow/edges/edge.tsx
index 5b0263068..879169763 100644
--- a/packages/graph-editor/src/components/flow/edges/edge.tsx
+++ b/packages/graph-editor/src/components/flow/edges/edge.tsx
@@ -1,4 +1,4 @@
-import { EdgeType, SystemSettings } from '@/system/settings.js';
+import { EdgeType, SystemSettings } from '@/system/frame/settings.js';
 import { Port } from '@tokens-studio/graph-engine';
 import { getBetterBezierPath } from './offsetBezier.js';
 import {
@@ -7,8 +7,8 @@ import {
   getStraightPath,
 } from 'reactflow';
 import { observer } from 'mobx-react-lite';
+import { useFrame } from '@/system/frame/hook.js';
 import { useLocalGraph } from '@/context/graph.js';
-import { useSystem } from '@/system/hook.js';
 import React from 'react';
 import colors from '@/tokens/colors.js';
 
@@ -27,8 +27,8 @@ const extractColor = (port: Port) => {
 };
 
 export default (props) => {
-  const system = useSystem();
-  return <CustomEdgeInner {...props} settings={system.settings} />;
+  const frame = useFrame();
+  return <CustomEdgeInner {...props} settings={frame.settings} />;
 };
 
 export interface ICustomEdge {
diff --git a/packages/graph-editor/src/components/flow/nodes/passthroughNode.tsx b/packages/graph-editor/src/components/flow/nodes/passthroughNode.tsx
index e7f2faa7b..ea83df2dd 100644
--- a/packages/graph-editor/src/components/flow/nodes/passthroughNode.tsx
+++ b/packages/graph-editor/src/components/flow/nodes/passthroughNode.tsx
@@ -2,20 +2,20 @@ import { Handle } from '../handles.js';
 import { HandleContainer } from '../handles.js';
 import { Stack } from '@tokens-studio/ui';
 import { extractType, extractTypeIcon } from '../wrapper/nodeV2.js';
+import { useFrame } from '@/system/frame/hook.js';
 import { useLocalGraph } from '@/context/graph.js';
-import { useSystem } from '@/system/hook.js';
 import React from 'react';
 
 export const PassthroughNode = (args) => {
   const { id } = args;
   const graph = useLocalGraph();
   const node = graph.getNode(id);
-  const system = useSystem();
+  const frame = useFrame();
 
   if (!node) return null;
 
   const port = node.inputs.value;
-  const typeCol = extractTypeIcon(port, system.icons);
+  const typeCol = extractTypeIcon(port, frame.icons);
   const type = extractType(port.type);
 
   return (
diff --git a/packages/graph-editor/src/components/flow/wrapper/nodeV2.tsx b/packages/graph-editor/src/components/flow/wrapper/nodeV2.tsx
index 61c6731bb..0d7934c13 100644
--- a/packages/graph-editor/src/components/flow/wrapper/nodeV2.tsx
+++ b/packages/graph-editor/src/components/flow/wrapper/nodeV2.tsx
@@ -17,11 +17,11 @@ import { ErrorBoundaryContent } from '@/components/ErrorBoundaryContent.js';
 import { Node as GraphNode } from '@tokens-studio/graph-engine';
 import { Handle, HandleContainer, useHandle } from '../handles.js';
 import { Stack, Text } from '@tokens-studio/ui';
-import { SystemSettings } from '@/system/settings.js';
+import { SystemSettings } from '@/system/frame/settings.js';
 import { observer } from 'mobx-react-lite';
 import { title } from '@/annotations/index.js';
+import { useFrame } from '@/system/frame/hook.js';
 import { useLocalGraph } from '@/context/graph.js';
-import { useSystem } from '@/system/hook.js';
 import React from 'react';
 import clsx from 'clsx';
 import colors from '@/tokens/colors.js';
@@ -52,7 +52,7 @@ export const NodeV2 = (args) => {
   const { id } = args;
   const graph = useLocalGraph();
   const node = graph.getNode(id);
-  const system = useSystem();
+  const frame = useFrame();
 
   if (!node) {
     return <div>Node not found</div>;
@@ -63,7 +63,7 @@ export const NodeV2 = (args) => {
       <NodeWrap
         node={node}
         icon={args?.data?.icon}
-        settings={system.settings}
+        settings={frame.settings}
       />
     </ErrorBoundary>
   );
@@ -110,7 +110,7 @@ export const SpecificWrapper = observer(
 );
 
 const NodeWrap = observer(({ settings, node, icon }: INodeWrap) => {
-  const system = useSystem();
+  const frame = useFrame();
 
   //Check if the input allows for dynamic inputs
   const isInput = !!(
@@ -145,7 +145,7 @@ const NodeWrap = observer(({ settings, node, icon }: INodeWrap) => {
             <PortArray ports={node.inputs} />
           </HandleContainer>
         </Stack>
-        <SpecificWrapper specifics={system.specifics} node={node} />
+        <SpecificWrapper specifics={frame.specifics} node={node} />
       </Stack>
       {settings.showTimings && (
         <div className={styles.timingText}>
@@ -163,7 +163,7 @@ export interface IPortArray {
   hideNames?: boolean;
 }
 export const PortArray = observer(({ ports, hideNames }: IPortArray) => {
-  const system = useSystem();
+  const frame = useFrame();
   const entries = Object.values(ports).sort();
   return (
     <>
@@ -173,8 +173,8 @@ export const PortArray = observer(({ ports, hideNames }: IPortArray) => {
           <InputHandle
             port={input}
             hideName={hideNames}
-            inlineTypes={system.settings.inlineTypes}
-            inlineValues={system.settings.inlineValues}
+            inlineTypes={frame.settings.inlineTypes}
+            inlineValues={frame.settings.inlineValues}
           />
         ))}
     </>
@@ -349,8 +349,8 @@ export interface IInputHandle {
 
 const InputHandle = observer(
   ({ port, hideName, inlineTypes, inlineValues }: IInputHandle) => {
-    const system = useSystem();
-    const typeCol = extractTypeIcon(port, system.icons);
+    const frame = useFrame();
+    const typeCol = extractTypeIcon(port, frame.icons);
     const input = port as unknown as Input;
     const type = extractType(port.type);
     const handleInformation = useHandle();
diff --git a/packages/graph-editor/src/components/hotKeys/index.tsx b/packages/graph-editor/src/components/hotKeys/index.tsx
index 8f3ec8c29..882c32ccb 100644
--- a/packages/graph-editor/src/components/hotKeys/index.tsx
+++ b/packages/graph-editor/src/components/hotKeys/index.tsx
@@ -5,10 +5,10 @@ import { savedViewports } from '@/annotations/index.js';
 import { useAction } from '@/editor/actions/provider.js';
 import { useAutoLayout } from '@/editor/hooks/useAutolayout.js';
 import { useDispatch } from '@/hooks/useDispatch.js';
+import { useFrame } from '@/system/frame/hook.js';
 import { useLocalGraph } from '@/hooks/index.js';
 import { useMemo } from 'react';
 import { useReactFlow } from 'reactflow';
-import { useSystem } from '@/system/hook.js';
 import { useToast } from '@/hooks/useToast.js';
 import React from 'react';
 import copy from 'copy-to-clipboard';
@@ -73,7 +73,7 @@ export const getViewports = (graph) => {
 };
 
 export const useHotkeys = () => {
-  const system = useSystem();
+  const frame = useFrame();
   const duplicateNodes = useAction('duplicateNodes');
   const deleteNode = useAction('deleteNode');
   const copyNodes = useAction('copyNodes');
@@ -223,20 +223,20 @@ export const useHotkeys = () => {
       },
       TOGGLE_GRID: (event) => {
         event.preventDefault();
-        system.settings.setShowGrid(!system.settings.showGrid);
+        frame.settings.setShowGrid(!frame.settings.showGrid);
       },
       FIND: (event) => {
         event.preventDefault();
         dispatch.settings.setShowSearch(true);
       },
       TOGGLE_SNAP_GRID: () => {
-        system.settings.setSnapGrid(!system.settings.snapGrid);
+        frame.settings.setSnapGrid(!frame.settings.snapGrid);
       },
       TOGGLE_TYPES: () => {
-        system.settings.setInlineTypes(!system.settings.inlineTypes);
+        frame.settings.setInlineTypes(!frame.settings.inlineTypes);
       },
       TOGGLE_VALUES: () => {
-        dispatch.settings.setInlineValues(!system.settings.inlineValues);
+        dispatch.settings.setInlineValues(!frame.settings.inlineValues);
       },
     }),
 
@@ -248,7 +248,7 @@ export const useHotkeys = () => {
       graph,
       layout,
       reactFlowInstance,
-      system.settings,
+      frame.settings,
       trigger,
     ],
   );
diff --git a/packages/graph-editor/src/components/panels/dropPanel/dropPanel.tsx b/packages/graph-editor/src/components/panels/dropPanel/dropPanel.tsx
index dd494e9f6..b5b71f924 100644
--- a/packages/graph-editor/src/components/panels/dropPanel/dropPanel.tsx
+++ b/packages/graph-editor/src/components/panels/dropPanel/dropPanel.tsx
@@ -2,7 +2,7 @@ import { Accordion, Stack, TextInput } from '@tokens-studio/ui';
 import { DragItem } from './DragItem.js';
 import { DropPanelStore } from './data.js';
 import { observer } from 'mobx-react-lite';
-import { useSystem } from '@/system/hook.js';
+import { useFrame } from '@/system/frame/hook.js';
 import NavArrowRight from '@tokens-studio/icons/NavArrowRight.js';
 import React, { useState } from 'react';
 import styles from './dropPanel.module.css';
@@ -22,8 +22,8 @@ export interface IDropPanel {
 }
 
 export const DropPanel = () => {
-  const sys = useSystem();
-  return <DropPanelInner data={sys.panelItems} />;
+  const frame = useFrame();
+  return <DropPanelInner data={frame.panelItems} />;
 };
 
 export const DropPanelInner = observer(({ data }: IDropPanel) => {
diff --git a/packages/graph-editor/src/components/panels/legend/index.tsx b/packages/graph-editor/src/components/panels/legend/index.tsx
index a7f4f8ad9..b27d1159f 100644
--- a/packages/graph-editor/src/components/panels/legend/index.tsx
+++ b/packages/graph-editor/src/components/panels/legend/index.tsx
@@ -1,11 +1,11 @@
 import { Stack, Text } from '@tokens-studio/ui';
-import { useSystem } from '@/system/hook.js';
+import { useFrame } from '@/system/frame/hook.js';
 import React, { useMemo } from 'react';
 import colors from '@/tokens/colors.js';
 
 export const Legend = () => {
-  const system = useSystem();
-  return <LegendInner iconsRegistry={system.icons} />;
+  const frame = useFrame();
+  return <LegendInner iconsRegistry={frame.icons} />;
 };
 
 export interface ILegendInner {
diff --git a/packages/graph-editor/src/components/panels/settings/index.tsx b/packages/graph-editor/src/components/panels/settings/index.tsx
index 624bef8a8..04b14d41a 100644
--- a/packages/graph-editor/src/components/panels/settings/index.tsx
+++ b/packages/graph-editor/src/components/panels/settings/index.tsx
@@ -1,19 +1,19 @@
 import { Checkbox, Label, Select, Stack, Text } from '@tokens-studio/ui';
-import { EdgeType, LayoutType, SystemSettings } from '@/system/settings.js';
+import { EdgeType, LayoutType, SystemSettings } from '@/system/frame/settings.js';
 import { contextMenuSelector } from '@/redux/selectors/ui.js';
 import { observer } from 'mobx-react-lite';
 import { useDispatch } from '@/hooks/useDispatch.js';
+import { useFrame } from '@/system/frame/hook.js';
 import { useSelector } from 'react-redux';
-import { useSystem } from '@/system/hook.js';
 import React from 'react';
 
 const EdgeValues = Object.values(EdgeType);
 const LayoutValues = Object.values(LayoutType);
 
 export const Settings = () => {
-  const system = useSystem();
+  const frame = useFrame();
 
-  return <SettingsInner settings={system.settings} />;
+  return <SettingsInner settings={frame.settings} />;
 };
 
 export const SettingsInner = observer(
diff --git a/packages/graph-editor/src/components/portPanel/index.tsx b/packages/graph-editor/src/components/portPanel/index.tsx
index 61088c06d..aa5b78ee9 100644
--- a/packages/graph-editor/src/components/portPanel/index.tsx
+++ b/packages/graph-editor/src/components/portPanel/index.tsx
@@ -11,8 +11,8 @@ import { InlineTypeLabel } from '@/components/flow/index.js';
 import { Input } from '@tokens-studio/graph-engine';
 import { deletable, hidden, resetable } from '@/annotations/index.js';
 import { observer } from 'mobx-react-lite';
+import { useFrame } from '@/system/frame/hook.js';
 import { useGraph } from '@/hooks/useGraph.js';
-import { useSystem } from '@/system/hook.js';
 import Download from '@tokens-studio/icons/Download.js';
 import Eye from '@tokens-studio/icons/Eye.js';
 import EyeClosed from '@tokens-studio/icons/EyeClosed.js';
@@ -49,22 +49,22 @@ export const PortPanel = observer(({ ports, readOnly }: IPortPanel) => {
 
 export const Port = observer(({ port, readOnly: isReadOnly }: IPort) => {
   const readOnly = isReadOnly || port.isConnected;
-  const sys = useSystem();
+  const frame = useFrame();
   const graph = useGraph();
   const isInput = 'studio.tokens.generic.input' === port.node.factory.type;
   const isDynamicInput = Boolean(port.annotations[deletable]);
   const resettable = Boolean(port.annotations[resetable]);
 
   const inner = useMemo(() => {
-    const field = sys.controls.find((x) => x.matcher(port, { readOnly }));
+    const field = frame.controls.find((x) => x.matcher(port, { readOnly }));
     const Component = field?.component as React.FC<IField>;
 
     return (
-      <Component port={port} readOnly={readOnly} settings={sys.settings} />
+      <Component port={port} readOnly={readOnly} settings={frame.settings} />
     );
     //We use an explicit dependency on the type
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [sys.controls, port, readOnly, port.type]);
+  }, [frame.controls, port, readOnly, port.type]);
 
   const onClick = useCallback(() => {
     port.setVisible(!port.visible);
diff --git a/packages/graph-editor/src/components/toolbar/dropdowns/add.tsx b/packages/graph-editor/src/components/toolbar/dropdowns/add.tsx
index 79c0e7f82..57cfac7d9 100644
--- a/packages/graph-editor/src/components/toolbar/dropdowns/add.tsx
+++ b/packages/graph-editor/src/components/toolbar/dropdowns/add.tsx
@@ -1,15 +1,15 @@
 import { Button, DropdownMenu, Stack, Tooltip } from '@tokens-studio/ui';
 import { useAction } from '@/editor/actions/provider.js';
 import { useDispatch } from '@/hooks/index.js';
+import { useFrame } from '@/system/frame/hook.js';
 import { useReactFlow } from 'reactflow';
 import { useSelectAddedNodes } from '@/hooks/useSelectAddedNodes.js';
-import { useSystem } from '@/system/hook.js';
 import NavArrowRight from '@tokens-studio/icons/NavArrowRight.js';
 import Plus from '@tokens-studio/icons/Plus.js';
 import React, { useCallback } from 'react';
 
 export const AddDropdown = () => {
-  const sys = useSystem();
+  const frame = useFrame();
   const createNode = useAction('createNode');
   const reactFlowInstance = useReactFlow();
   const dispatch = useDispatch();
@@ -54,7 +54,7 @@ export const AddDropdown = () => {
   );
 
   const nodes = React.useMemo(() => {
-    return sys.panelItems.groups.map((group) => {
+    return frame.panelItems.groups.map((group) => {
       return (
         <DropdownMenu.Sub key={group.key}>
           <DropdownMenu.SubTrigger>
@@ -81,7 +81,7 @@ export const AddDropdown = () => {
         </DropdownMenu.Sub>
       );
     });
-  }, [sys.panelItems.groups, addNode]);
+  }, [frame.panelItems.groups, addNode]);
 
   return (
     <DropdownMenu onOpenChange={onDropdownOpenChange}>
diff --git a/packages/graph-editor/src/components/toolbar/toolbar.tsx b/packages/graph-editor/src/components/toolbar/toolbar.tsx
index a89f9443f..76cf0b74b 100644
--- a/packages/graph-editor/src/components/toolbar/toolbar.tsx
+++ b/packages/graph-editor/src/components/toolbar/toolbar.tsx
@@ -1,12 +1,12 @@
 import * as Toolbar from '@radix-ui/react-toolbar';
-import { useSystem } from '@/system/hook.js';
+import { useFrame } from '@/system/frame/hook.js';
 import React from 'react';
 import styles from './toolbar.module.css';
 
 export const GraphToolbar = () => {
-  const system = useSystem();
+  const frame = useFrame();
   return (
-    <Toolbar.Root className={styles.root}>{system.toolbarButtons}</Toolbar.Root>
+    <Toolbar.Root className={styles.root}>{frame.toolbarButtons}</Toolbar.Root>
   );
 };
 
diff --git a/packages/graph-editor/src/context/ExternalDataContext.tsx b/packages/graph-editor/src/context/ExternalDataContext.tsx
deleted file mode 100644
index 773bcb971..000000000
--- a/packages/graph-editor/src/context/ExternalDataContext.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import React, { createContext, useContext, useMemo } from 'react';
-
-interface ExternalSetData {
-  tokens: Record<string, unknown>[];
-}
-
-export interface EditorExternalSet {
-  name: string;
-  identifier: string;
-}
-
-type ExternalDataContextType = {
-  tokenSets?: EditorExternalSet[];
-  loadSetTokens: (identifier: string) => Promise<ExternalSetData>;
-};
-
-const ExternalDataContext = createContext<ExternalDataContextType>({
-  tokenSets: undefined,
-  loadSetTokens: async () => ({ tokens: [] }),
-});
-
-function ExternalDataContextProvider({
-  children,
-  tokenSets,
-  loadSetTokens,
-}: {
-  children: React.ReactNode;
-  tokenSets?: EditorExternalSet[];
-  loadSetTokens: (identifier: string) => Promise<ExternalSetData>;
-}) {
-  const providerValue = useMemo(
-    () => ({ tokenSets, loadSetTokens }),
-    [tokenSets, loadSetTokens],
-  );
-
-  return (
-    <ExternalDataContext.Provider value={providerValue}>
-      {children}
-    </ExternalDataContext.Provider>
-  );
-}
-
-function useExternalData() {
-  const context = useContext(ExternalDataContext);
-
-  if (context === undefined) {
-    console.error(
-      'useExternalData must be used within a ExternalDataContextProvider',
-    );
-  }
-  return context;
-}
-
-export { ExternalDataContextProvider, useExternalData };
diff --git a/packages/graph-editor/src/context/ExternalLoaderContext.tsx b/packages/graph-editor/src/context/ExternalLoaderContext.tsx
deleted file mode 100644
index 1c01083e2..000000000
--- a/packages/graph-editor/src/context/ExternalLoaderContext.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { ExternalLoader } from '@tokens-studio/graph-engine';
-import React, { createContext, useContext } from 'react';
-
-const ExternalLoaderContext = createContext<ExternalLoader | undefined>(
-  undefined,
-);
-
-function ExternalLoaderProvider({
-  children,
-  externalLoader,
-}: {
-  children: React.ReactNode;
-  externalLoader?: ExternalLoader;
-}) {
-  return (
-    <ExternalLoaderContext.Provider value={externalLoader}>
-      {children}
-    </ExternalLoaderContext.Provider>
-  );
-}
-
-function useExternalLoader() {
-  const context = useContext(ExternalLoaderContext);
-
-  return context;
-}
-
-export { ExternalLoaderProvider, useExternalLoader };
diff --git a/packages/graph-editor/src/context/index.ts b/packages/graph-editor/src/context/index.ts
deleted file mode 100644
index 36973211f..000000000
--- a/packages/graph-editor/src/context/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './ExternalDataContext.js';
diff --git a/packages/graph-editor/src/data/version.ts b/packages/graph-editor/src/data/version.ts
index 1a2aa36dc..0fad64366 100644
--- a/packages/graph-editor/src/data/version.ts
+++ b/packages/graph-editor/src/data/version.ts
@@ -1 +1 @@
-export const version = '4.3.11';
+export const version = '4.3.12';
diff --git a/packages/graph-editor/src/editor/editorTypes.ts b/packages/graph-editor/src/editor/editorTypes.ts
index f69893a04..7b410ab99 100644
--- a/packages/graph-editor/src/editor/editorTypes.ts
+++ b/packages/graph-editor/src/editor/editorTypes.ts
@@ -1,5 +1,4 @@
 import {
-  ExternalLoader,
   Graph,
   Node as GraphNode,
   SchemaObject,
@@ -32,10 +31,6 @@ export interface EditorProps {
   emptyContent?: React.ReactNode;
   children?: React.ReactNode;
   onOutputChange?: (output: Record<string, unknown>) => void;
-  /**
-   * An external loader to use for loading the graphs or node data
-   */
-  externalLoader?: ExternalLoader;
   /**
    * Whether or not to show the menu
    */
@@ -55,17 +50,11 @@ export interface EditorProps {
    */
   schemas?: SchemaObject[];
 
-  /**
-   * Additional buttons to display in the toolbar
-   */
-  toolbarButtons?: React.ReactElement;
-
   /**
    * Additional colors to display in the editor for custom types
    */
   typeColors?: Record<string, { color: string; backgroundColor: string }>;
 
-  initialGraph?: Graph;
 }
 
 export interface GraphEditorProps {
@@ -83,7 +72,6 @@ export interface GraphEditorProps {
    */
   nodeTypes?: Record<string, typeof GraphNode>;
   children?: React.ReactNode;
-  initialGraph?: SerializedGraph;
 }
 
 export type ImperativeEditorRef = {
diff --git a/packages/graph-editor/src/editor/graph.tsx b/packages/graph-editor/src/editor/graph.tsx
index 380cf0956..50e4bbe9d 100644
--- a/packages/graph-editor/src/editor/graph.tsx
+++ b/packages/graph-editor/src/editor/graph.tsx
@@ -72,11 +72,10 @@ import {
 } from '@/annotations/index.js';
 import { duplicateNodes } from './actions/duplicate.js';
 import { useContextMenu } from 'react-contexify';
-import { useExternalLoader } from '@/context/ExternalLoaderContext.js';
+import { useFrame } from '@/system/frame/hook.js';
 import { useSelectAddedNodes } from '@/hooks/useSelectAddedNodes.js';
 import { useSelector } from 'react-redux';
 import { useSetCurrentNode } from '@/hooks/useSetCurrentNode.js';
-import { useSystem } from '@/system/hook.js';
 import { version } from '@/data/version.js';
 
 const snapGridCoords: SnapGrid = [16, 16];
@@ -102,42 +101,30 @@ export const EditorApp = React.forwardRef<
   ImperativeEditorRef,
   GraphEditorProps
 >((props: GraphEditorProps, ref) => {
-  const system = useSystem();
+  const frame = useFrame();
 
   const { id, children } = props;
 
-  const externalLoader = useExternalLoader();
   const contextMenus = useSelector(contextMenuSelector);
   const reactFlowWrapper = useRef<HTMLDivElement>(null);
   const reactFlowInstance = useReactFlow();
   const dispatch = useDispatch();
   const { getIntersectingNodes } = reactFlowInstance;
   const store = useStoreApi();
-  const initialGraph: Graph = useMemo(() => {
-    //Set defaults
-    const graph = new Graph();
-    graph.annotations[title] = 'Untitled Graph';
-    graph.annotations[description] = '';
-    return graph;
-  }, []);
-  const [graph, setTheGraph] = useState(initialGraph);
+
+  const [graph, setTheGraph] = useState(frame.graph);
 
   const internalRef = useRef<ImperativeEditorRef>(null);
   const activeGraphId = useSelector(currentPanelIdSelector);
 
-  //Update the external loader
-  useEffect(() => {
-    graph.externalLoader = externalLoader;
-  }, [graph, externalLoader]);
-
   const iconLookup = useMemo(() => {
-    return system.panelItems.groups.reduce((acc, group) => {
+    return frame.panelItems.groups.reduce((acc, group) => {
       group.items.forEach((item) => {
         acc[item.type] = item.icon || group.icon;
       });
       return acc;
     }, {});
-  }, [system.panelItems.groups]);
+  }, [frame.panelItems.groups]);
 
   const refProxy = useCallback(
     (v) => {
@@ -158,7 +145,7 @@ export const EditorApp = React.forwardRef<
 
   //Attach sideeffect listeners
   useEffect(() => {
-    system.capabilities.forEach((factory) => graph.registerCapability(factory));
+    frame.capabilities.forEach((factory) => graph.registerCapability(factory));
 
     graph.onFinalize('serialize', (serialized) => {
       const nodes = reactFlowInstance.getNodes();
@@ -355,7 +342,7 @@ export const EditorApp = React.forwardRef<
 
   // Create flow node types here, instead of the global scope to ensure that custom nodes added by the user are available in nodeTypes
   const fullNodeTypesRef = useRef({
-    ...system.customNodeUI,
+    ...frame.customNodeUI,
     GenericNode: NodeV2,
     [PASSTHROUGH]: PassthroughNode,
     [EditorNodeTypes.GROUP]: groupNode,
@@ -366,12 +353,12 @@ export const EditorApp = React.forwardRef<
     //Turn it into an O(1) lookup object
     return Object.fromEntries(
       Object.entries({
-        ...system.customNodeUI,
+        ...frame.customNodeUI,
         [NOTE]: NOTE,
         'studio.tokens.generic.preview': 'studio.tokens.generic.preview',
       }).map(([k]) => [k, k]),
     );
-  }, [system.customNodeUI]);
+  }, [frame.customNodeUI]);
 
   const handleDeleteNode = useMemo(() => {
     return deleteNode(graph, dispatch, reactFlowInstance);
@@ -382,7 +369,7 @@ export const EditorApp = React.forwardRef<
       createNode({
         reactFlowInstance,
         graph,
-        nodeLoader: system.nodeLoader,
+        nodeLoader: frame.nodeLoader,
         iconLookup,
         customUI: customNodeMap,
         dropPanelPosition,
@@ -391,7 +378,7 @@ export const EditorApp = React.forwardRef<
     [
       reactFlowInstance,
       graph,
-      system.nodeLoader,
+      frame.nodeLoader,
       iconLookup,
       customNodeMap,
       dropPanelPosition,
@@ -414,7 +401,7 @@ export const EditorApp = React.forwardRef<
       },
       loadRaw: async (serializedGraph) => {
         if (internalRef.current) {
-          await graph.deserialize(serializedGraph, system.nodeLoader);
+          await graph.deserialize(serializedGraph, frame.nodeLoader);
           internalRef?.current.load(graph);
         }
       },
@@ -495,7 +482,7 @@ export const EditorApp = React.forwardRef<
     [
       reactFlowInstance,
       graph,
-      system.nodeLoader,
+      frame.nodeLoader,
       setNodes,
       setEdges,
       dispatch.graph,
@@ -505,12 +492,6 @@ export const EditorApp = React.forwardRef<
 
   useSetCurrentNode();
 
-  useEffect(() => {
-    if (props.initialGraph) {
-      internalRef.current?.loadRaw(props.initialGraph);
-    }
-  }, []);
-
   const onConnect = useMemo(
     () => connectNodes({ graph, setEdges, dispatch }),
     [dispatch, graph, setEdges],
@@ -581,7 +562,7 @@ export const EditorApp = React.forwardRef<
         x: event.clientX,
         y: event.clientY,
       });
-      const PassthroughFactory = await system.nodeLoader(PASSTHROUGH);
+      const PassthroughFactory = await frame.nodeLoader(PASSTHROUGH);
 
       const newNode = new PassthroughFactory({
         graph,
@@ -643,7 +624,7 @@ export const EditorApp = React.forwardRef<
         return [...filtered, newEdge, newEdge2];
       });
     },
-    [reactFlowInstance, system, graph, setNodes, setEdges],
+    [reactFlowInstance, frame, graph, setNodes, setEdges],
   );
 
   const onNodeDrag = useCallback(
@@ -686,7 +667,7 @@ export const EditorApp = React.forwardRef<
     reactFlowInstance,
   });
 
-  const copyNodes = copyNodeAction(reactFlowInstance, graph, system.nodeLoader);
+  const copyNodes = copyNodeAction(reactFlowInstance, graph, frame.nodeLoader);
   const selectAddedNodes = useSelectAddedNodes();
 
   const onDrop = useCallback(
@@ -750,10 +731,10 @@ export const EditorApp = React.forwardRef<
               onEdgeDoubleClick={onEdgeDblClick}
               onEdgesDelete={onEdgesDeleted}
               edges={edges}
-              connectOnClick={system.settings.connectOnClick}
+              connectOnClick={frame.settings.connectOnClick}
               elevateNodesOnSelect={true}
               onNodeDragStop={onNodeDragStop}
-              snapToGrid={system.settings.snapGrid}
+              snapToGrid={frame.settings.snapGrid}
               edgeTypes={edgeTypes}
               nodeTypes={fullNodeTypesRef.current}
               snapGrid={snapGridCoords}
@@ -786,7 +767,7 @@ export const EditorApp = React.forwardRef<
               maxZoom={Infinity}
               proOptions={proOptions}
             >
-              {system.settings.showGrid && (
+              {frame.settings.showGrid && (
                 <Background
                   color="var(--color-neutral-stroke-subtle)"
                   gap={16}
@@ -797,7 +778,7 @@ export const EditorApp = React.forwardRef<
               {nodeCount === 0 && props.emptyContent}
               {activeGraphId === id && (
                 <CommandMenu
-                  items={system.panelItems}
+                  items={frame.panelItems}
                   handleSelectNewNodeType={handleSelectNewNodeType}
                 />
               )}
@@ -808,7 +789,7 @@ export const EditorApp = React.forwardRef<
             </ReactFlow>
           </HotKeys>
         </div>
-        {system.settings.showMinimap && <MiniMap />}
+        {frame.settings.showMinimap && <MiniMap />}
 
         <PaneContextMenu
           id={props.id + '_pane'}
diff --git a/packages/graph-editor/src/editor/hooks/useAutolayout.ts b/packages/graph-editor/src/editor/hooks/useAutolayout.ts
index a3a569744..eed2cf674 100644
--- a/packages/graph-editor/src/editor/hooks/useAutolayout.ts
+++ b/packages/graph-editor/src/editor/hooks/useAutolayout.ts
@@ -1,10 +1,10 @@
-import { LayoutType } from '@/system/settings.js';
+import { LayoutType } from '@/system/frame/settings.js';
 import { useCallback } from 'react';
 import { useDagreLayout } from '@/layouts/dagre.js';
-import { useSystem } from '@/system/hook.js';
+import { useFrame } from '@/system/frame/hook.js';
 
 export const useAutoLayout = () => {
-  const system = useSystem();
+  const system = useFrame();
   const dagreAutoLayout = useDagreLayout();
   return useCallback(() => {
     switch (system.settings.layoutType) {
diff --git a/packages/graph-editor/src/editor/layoutController.tsx b/packages/graph-editor/src/editor/layoutController.tsx
index 122fa814b..906a40d43 100644
--- a/packages/graph-editor/src/editor/layoutController.tsx
+++ b/packages/graph-editor/src/editor/layoutController.tsx
@@ -12,8 +12,8 @@ import { DropPanel } from '@/components/panels/dropPanel/dropPanel.js';
 import { EditorProps, ImperativeEditorRef } from './editorTypes.js';
 import { ErrorBoundary } from 'react-error-boundary';
 import { ErrorBoundaryContent } from '@/components/ErrorBoundaryContent.js';
-import { ExternalLoaderProvider } from '@/context/ExternalLoaderContext.js';
 import { FindDialog } from '@/components/dialogs/findDialog.js';
+import { FrameContext } from '@/system/frame/hook.js';
 import { GraphEditor } from './graphEditor.js';
 import { IconButton, Stack, Tooltip } from '@tokens-studio/ui';
 import { MAIN_GRAPH_ID } from '@/constants.js';
@@ -278,7 +278,6 @@ export const LayoutController = React.forwardRef<
   EditorProps
 >((props: EditorProps, ref) => {
   const {
-    externalLoader,
     initialLayout,
     menuItems = defaultMenuDataFactory(),
   } = props;
@@ -309,9 +308,7 @@ export const LayoutController = React.forwardRef<
 
   const onLayoutChange = (newLayout: LayoutBase) => {
     //We need to find the graph tab container in the newlayout
-    const graphContainer = findGraphPanel(newLayout);
-
-    console.log(graphContainer);
+    const graphContainer = findGraphPanel(newLayout)
 
     if (graphContainer?.activeId) {
       //Get the active Id to find the currently selected graph
@@ -320,7 +317,7 @@ export const LayoutController = React.forwardRef<
   };
 
   return (
-    <ExternalLoaderProvider externalLoader={externalLoader}>
+    <FrameContext.Provider value={system.frames[0]}>
       <Stack
         className="graph-editor"
         direction="column"
@@ -339,7 +336,7 @@ export const LayoutController = React.forwardRef<
           <FindDialog />
         </Tooltip.Provider>
       </Stack>
-    </ExternalLoaderProvider>
+    </FrameContext.Provider>
   );
 });
 LayoutController.displayName = 'LayoutController';
diff --git a/packages/graph-editor/src/index.tsx b/packages/graph-editor/src/index.tsx
index fa92a3a34..5a56a4dc9 100644
--- a/packages/graph-editor/src/index.tsx
+++ b/packages/graph-editor/src/index.tsx
@@ -3,7 +3,6 @@ export * from './utils/index.js';
 export * from './types/index.js';
 export * from './redux/index.js';
 export * from './redux/selectors/index.js';
-export * from './context/index.js';
 export * from './editor/graph.js';
 export * from './editor/index.js';
 export * from './editor/editorTypes.js';
@@ -21,3 +20,4 @@ export * from './registry/toolbar.js';
 export * from './types/index.js';
 
 export * from './system/index.js';
+export * from './system/frame/index.js';
diff --git a/packages/graph-editor/src/redux/models/registry.ts b/packages/graph-editor/src/redux/models/registry.ts
index c276337fc..50a97aa59 100644
--- a/packages/graph-editor/src/redux/models/registry.ts
+++ b/packages/graph-editor/src/redux/models/registry.ts
@@ -1,12 +1,8 @@
 import {
   AllSchemas,
   Node,
-  NodeLoader,
   SchemaObject,
 } from '@tokens-studio/graph-engine';
-import { DefaultToolbarButtons } from '@/registry/toolbar.js';
-import { DropPanelStore } from '@/components/panels/dropPanel/index.js';
-import { ReactElement } from 'react';
 import { RootModel } from './root.js';
 import { createModel } from '@rematch/core';
 
@@ -14,14 +10,12 @@ import { inputControls } from '@/registry/inputControls.js';
 
 export interface RegistryState {
   inputControls: Record<string, React.FC<{ node: Node }>>;
-  toolbarButtons: ReactElement[];
   schemas: SchemaObject[];
 }
 
 export const registryState = createModel<RootModel>()({
   state: {
     inputControls: { ...inputControls },
-    toolbarButtons: DefaultToolbarButtons(),
     schemas: AllSchemas,
   } as RegistryState,
   reducers: {
@@ -31,29 +25,5 @@ export const registryState = createModel<RootModel>()({
         schemas,
       };
     },
-    setNodeTypes: (state, nodeTypes: NodeLoader) => {
-      return {
-        ...state,
-        nodeTypes,
-      };
-    },
-    registerInputControl(
-      state,
-      payload: { key: string; value: React.FC<{ node: Node }> },
-    ) {
-      return {
-        ...state,
-        inputControls: {
-          ...state.inputControls,
-          [payload.key]: payload.value,
-        },
-      };
-    },
-    setPanelItems(state, payload: DropPanelStore) {
-      return {
-        ...state,
-        panelItems: payload,
-      };
-    },
   },
 });
diff --git a/packages/graph-editor/src/redux/selectors/registry.ts b/packages/graph-editor/src/redux/selectors/registry.ts
index cfdad6d63..5e2db078a 100644
--- a/packages/graph-editor/src/redux/selectors/registry.ts
+++ b/packages/graph-editor/src/redux/selectors/registry.ts
@@ -6,10 +6,6 @@ export const inputControls = createSelector(
   (state) => state.inputControls,
 );
 
-export const ToolBarButtonsSelector = createSelector(
-  registry,
-  (state) => state.toolbarButtons,
-);
 
 export const SchemaSelector = createSelector(
   registry,
diff --git a/packages/graph-editor/src/system/frame/hook.tsx b/packages/graph-editor/src/system/frame/hook.tsx
new file mode 100644
index 000000000..39c4786bc
--- /dev/null
+++ b/packages/graph-editor/src/system/frame/hook.tsx
@@ -0,0 +1,8 @@
+import { Frame } from './index.js';
+import { createContext, useContext } from 'react';
+
+export const FrameContext = createContext<Frame | undefined>(undefined);
+
+export const useFrame = (): Frame => {
+  return useContext(FrameContext)!;
+};
diff --git a/packages/graph-editor/src/system/frame/index.tsx b/packages/graph-editor/src/system/frame/index.tsx
new file mode 100644
index 000000000..afed16062
--- /dev/null
+++ b/packages/graph-editor/src/system/frame/index.tsx
@@ -0,0 +1,104 @@
+import {
+  CapabilityFactory,
+  Graph,
+  Node,
+  NodeLoader,
+} from '@tokens-studio/graph-engine';
+import { Control } from '@/types/controls.js';
+import { DefaultToolbarButtons } from '@/registry/toolbar.js';
+import { DropPanelStore } from '@/components/index.js';
+import { SystemSettings } from './settings.js';
+import { defaultSpecifics } from '@/registry/specifics.js';
+import { iconsFactory } from '@/registry/icon.js';
+import { makeAutoObservable } from 'mobx';
+import React from 'react';
+
+
+export interface IFrame {
+  /**
+   * The underlying graph to use for the frame
+   */
+  graph :Graph;
+  /**
+   * Items to display in the drop panel.
+   * Not populating this will result in the default items being displayed.
+   */ 
+  panelItems?: DropPanelStore;
+  /**
+   * Customize the controls that are displayed in the editor
+   */
+  controls?: Control[];
+  /**
+   * Additional specifics to display in the editor for custom types
+   */
+  specifics?: Record<
+    string,
+    React.FC<{
+      node: Node;
+    }>
+  >;
+  /**
+   * The loader for nodes to display in the editor
+   */
+  nodeLoader: NodeLoader;
+
+  /**
+   * Capabilities to load into the graphs. Each factory is loaded into each graph individually.
+   */
+  capabilities?: CapabilityFactory[];
+  /**
+   * A lookup of the custom node ui types to display in the editor.
+   */
+  customNodeUI?: Record<string, React.ReactElement>;
+  /**
+   * An icon lookup to be used for legends, etc
+   */
+  icons?: Record<string, React.ReactNode>;
+
+  settings?: SystemSettings;
+
+  /**
+   * Additional buttons to display in the toolbar
+   */
+  toolbarButtons?: React.ReactElement[];
+}
+
+export class Frame {
+  specifics!: Record<
+    string,
+    React.FC<{
+      node: Node;
+    }>
+  >;
+  nodeLoader!: NodeLoader;
+  graph!: Graph;
+  panelItems!: DropPanelStore;
+  capabilities!: CapabilityFactory[];
+  customNodeUI!: Record<string, React.ReactElement>;
+  controls!: Control[];
+  settings!: SystemSettings;
+  icons!: Record<string, React.ReactNode>;
+  toolbarButtons!: React.ReactElement[];
+
+  constructor(config: IFrame) {
+    const defaultConfig: Partial<IFrame> = {
+      specifics: defaultSpecifics,
+      panelItems: new DropPanelStore([]),
+      capabilities: [],
+      customNodeUI: {},
+      controls: [],
+      icons: iconsFactory(),
+      settings: new SystemSettings({}),
+      toolbarButtons: DefaultToolbarButtons(),
+    };
+
+    Object.assign(this, defaultConfig, config);
+    makeAutoObservable(this);
+  }
+
+  serialize() {
+    return {
+      graph: this.graph.serialize(),
+    }
+  }
+}
diff --git a/packages/graph-editor/src/system/settings.tsx b/packages/graph-editor/src/system/frame/settings.tsx
similarity index 100%
rename from packages/graph-editor/src/system/settings.tsx
rename to packages/graph-editor/src/system/frame/settings.tsx
diff --git a/packages/graph-editor/src/system/index.tsx b/packages/graph-editor/src/system/index.tsx
index e79a90b5c..3b8d13554 100644
--- a/packages/graph-editor/src/system/index.tsx
+++ b/packages/graph-editor/src/system/index.tsx
@@ -1,98 +1,33 @@
-import {
-  CapabilityFactory,
-  Node,
-  NodeLoader,
-} from '@tokens-studio/graph-engine';
-import { Control } from '@/types/controls.js';
-import { DefaultToolbarButtons } from '@/registry/toolbar.js';
-import { DropPanelStore } from '@/components/index.js';
-import { SystemSettings } from './settings.js';
+import { Frame } from "./frame/index.js";
 import { TabBase, TabData } from 'rc-dock';
-import { defaultSpecifics } from '@/registry/specifics.js';
-import { iconsFactory } from '@/registry/icon.js';
 import { makeAutoObservable } from 'mobx';
-import React from 'react';
-
-export type TabLoader = (tab: TabBase) => TabData | undefined;
 
 export interface ISystem {
-  /**
-   * Items to display in the drop panel.
-   * Not populating this will result in the default items being displayed.
-   */
-  panelItems?: DropPanelStore;
-  /**
-   * Customize the controls that are displayed in the editor
-   */
-  controls?: Control[];
-  /**
-   * Additional specifics to display in the editor for custom types
-   */
-  specifics?: Record<
-    string,
-    React.FC<{
-      node: Node;
-    }>
-  >;
-  /**
-   * The loader for nodes to display in the editor
-   */
-  nodeLoader: NodeLoader;
-  /**
-   * The loader for tabs to display in the editor
-   */
-  tabLoader: TabLoader;
-  /**
-   * Capabilities to load into the graphs. Each factory is loaded into each graph individually.
-   */
-  capabilities?: CapabilityFactory[];
-  /**
-   * A lookup of the custom node ui types to display in the editor.
-   */
-  customNodeUI?: Record<string, React.ReactElement>;
-  /**
-   * An icon lookup to be used for legends, etc
-   */
-  icons?: Record<string, React.ReactNode>;
 
-  settings?: SystemSettings;
-
-  /**
-   * Additional buttons to display in the toolbar
-   */
-  toolbarButtons?: React.ReactElement[];
+    /**
+     * The loader for tabs to display in the editor
+     */
+    tabLoader: TabLoader;
+    frames: Frame[];
 }
 
+export type TabLoader = (tab: TabBase) => TabData | undefined;
+
+
 export class System {
-  specifics!: Record<
-    string,
-    React.FC<{
-      node: Node;
-    }>
-  >;
-  nodeLoader!: NodeLoader;
-  tabLoader!: TabLoader;
-  panelItems!: DropPanelStore;
-  capabilities!: CapabilityFactory[];
-  customNodeUI!: Record<string, React.ReactElement>;
-  controls!: Control[];
-  settings!: SystemSettings;
-  icons!: Record<string, React.ReactNode>;
-  toolbarButtons!: React.ReactElement[];
+    frames: Frame[] = [];
+    tabLoader!: TabLoader;
+
+    constructor(config: ISystem) {
+        const defaultConfig: Partial<System> = {
+            frames: [],
+        };
 
-  constructor(config: ISystem) {
-    const defaultConfig: Partial<ISystem> = {
-      specifics: defaultSpecifics,
-      panelItems: new DropPanelStore([]),
-      capabilities: [],
-      customNodeUI: {},
-      controls: [],
-      icons: iconsFactory(),
-      settings: new SystemSettings({}),
-      toolbarButtons: DefaultToolbarButtons(),
-    };
+        Object.assign(this, defaultConfig, config);
+        makeAutoObservable(this);
+    }
 
-    Object.assign(this, defaultConfig, config);
-    makeAutoObservable(this);
-  }
+    addFrame(frame: Frame) {
+        this.frames.push(frame);
+    }
 }
diff --git a/packages/ui/src/app/editor/page.tsx b/packages/ui/src/app/editor/page.tsx
index 2e6b10c2e..70a14757e 100644
--- a/packages/ui/src/app/editor/page.tsx
+++ b/packages/ui/src/app/editor/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 import { JoyrideTooltip } from '@/components/joyride/tooltip.tsx';
-import { createToolbarButtons } from '@/components/editor/toolbar.tsx';
+import { createToolbarButtons } from '@/components/editor/toolbar/index.tsx';
 import { observer } from 'mobx-react-lite';
 import { useJourney } from '@/components/journeys/basic.tsx';
 import Editor from '@/components/editor/index.tsx';
diff --git a/packages/ui/src/components/editor/index.tsx b/packages/ui/src/components/editor/index.tsx
index 601792722..a0883f859 100644
--- a/packages/ui/src/components/editor/index.tsx
+++ b/packages/ui/src/components/editor/index.tsx
@@ -1,8 +1,9 @@
 'use client';
 
-import { Editor, System } from '@tokens-studio/graph-editor';
+import { Editor, Frame, System } from '@tokens-studio/graph-editor';
 import { EmptyStateEditor } from '../EmptyStateEditor.tsx';
 import { ExamplesPicker } from '../ExamplesPicker.tsx';
+import { Graph } from '@tokens-studio/graph-engine';
 import {
 	capabilities,
 	controls,
@@ -41,15 +42,20 @@ export const EditorTab = observer(
 		}, []);
 
 		const sys = useMemo(() => {
+
+			const graph = new Graph();
 			return new System({
-				specifics,
-				panelItems,
-				tabLoader,
-				nodeLoader: loadCompounds,
-				capabilities,
-				controls,
-				icons,
-				toolbarButtons
+				frames: [new Frame({
+					graph,
+					specifics,
+					panelItems,
+					nodeLoader: loadCompounds,
+					capabilities,
+					controls,
+					icons,
+					toolbarButtons
+				})],
+				tabLoader
 			});
 		}, []);
 
diff --git a/packages/ui/src/components/editor/toolbar.tsx b/packages/ui/src/components/editor/toolbar.tsx
deleted file mode 100644
index c05a9acf5..000000000
--- a/packages/ui/src/components/editor/toolbar.tsx
+++ /dev/null
@@ -1,181 +0,0 @@
-import {
-	AddDropdown,
-	AlignDropdown,
-	DownloadToolbarButton,
-	HelpDropdown,
-	type ImperativeEditorRef,
-	LayoutDropdown,
-	PlayControls,
-	SettingsToolbarButton,
-	ToolbarSeparator,
-	UploadToolbarButton,
-	ZoomDropdown,
-	mainGraphSelector,
-	useOpenPanel
-} from '@tokens-studio/graph-editor';
-
-import { AISummary } from '../panels/aiSummary.tsx';
-import { IconButton, Tooltip } from '@tokens-studio/ui';
-import { Preview } from '../panels/preview.tsx';
-import { ShareAndroidSolid } from 'iconoir-react';
-import { SharePopover } from '../share/index.tsx';
-import { client } from '@/api/sdk/index.ts';
-import { useErrorToast } from '@/hooks/useToast.tsx';
-import { useSelector } from 'react-redux';
-import FloppyDisk from '@tokens-studio/icons/FloppyDisk.js';
-import React from 'react';
-import Sparks from '@tokens-studio/icons/Sparks.js';
-import XrayView from '@tokens-studio/icons/XrayView.js';
-
-let origin = '';
-if (typeof window !== 'undefined') {
-	window.location.protocol;
-	origin = window.location.origin;
-}
-
-export const SaveButton = ({ id }) => {
-	const mainGraph = useSelector(mainGraphSelector);
-	const graphRef = mainGraph?.ref as ImperativeEditorRef | undefined;
-	const { mutateAsync, isPending, error } =
-		client.graph.updateGraph.useMutation();
-
-	useErrorToast(error);
-
-	const onSave = async () => {
-		if (!graphRef || isPending) return;
-
-		const saved = graphRef!.save();
-
-		await mutateAsync({
-			params: {
-				id
-			},
-			body: {
-				graph: saved as any
-			}
-		});
-	};
-
-	return (
-		<Tooltip label='Save' side='bottom'>
-			<IconButton
-				emphasis='low'
-				loading={isPending}
-				onClick={onSave}
-				icon={<FloppyDisk />}
-			/>
-		</Tooltip>
-	);
-};
-
-export const ShareButton = ({ id }) => {
-	const { mutateAsync, isPending, error } =
-		client.graph.updateGraph.useMutation();
-
-	const [shareOpen, setShareOpen] = React.useState(false);
-
-	useErrorToast(error);
-
-	const onShare = async () => {
-		if (isPending) return;
-
-		try {
-			await mutateAsync({
-				params: {
-					id
-				},
-				body: {
-					public: true
-				}
-			});
-			setShareOpen(true);
-		} catch (err) {
-			//Nothing
-		}
-	};
-
-	const onClose = () => {
-		setShareOpen(false);
-	};
-
-	return (
-		<SharePopover
-			open={shareOpen}
-			onClose={onClose}
-			link={`${origin}/editor/${id}`}
-		>
-			<Tooltip label='Share' side='bottom'>
-				<IconButton
-					emphasis='low'
-					onClick={onShare}
-					loading={isPending}
-					icon={<ShareAndroidSolid />}
-				/>
-			</Tooltip>
-		</SharePopover>
-	);
-};
-
-export const AiSummary = () => {
-	const { toggle } = useOpenPanel();
-	return (
-		<Tooltip label='Artificial intelligence' side='bottom'>
-			<IconButton
-				emphasis='low'
-				onClick={() =>
-					toggle({
-						group: 'popout',
-						title: 'Artificial intelligence',
-						id: 'ai',
-						content: <AISummary />
-					})
-				}
-				icon={<Sparks />}
-			/>
-		</Tooltip>
-	);
-};
-
-export const PreviewButton = () => {
-	const { toggle } = useOpenPanel();
-	return (
-		<Tooltip label='Preview' side='bottom'>
-			<IconButton
-				emphasis='low'
-				onClick={() =>
-					toggle({
-						group: 'popout',
-						title: 'Preview',
-						id: 'preview',
-						content: <Preview />
-					})
-				}
-				icon={<XrayView />}
-			/>
-		</Tooltip>
-	);
-};
-
-export const createToolbarButtons = (buttons?: React.ReactElement) => {
-	return (
-		<>
-			<AddDropdown />
-			<ToolbarSeparator />
-			<ZoomDropdown />
-			<ToolbarSeparator />
-			<AlignDropdown />
-			<ToolbarSeparator />
-			<PlayControls />
-			<ToolbarSeparator />
-			<LayoutDropdown />
-			<SettingsToolbarButton />
-			<HelpDropdown />
-			<AiSummary />
-			<PreviewButton />
-			<ToolbarSeparator />
-			<DownloadToolbarButton />
-			<UploadToolbarButton />
-			{buttons}
-		</>
-	);
-};
diff --git a/packages/ui/src/components/editor/toolbar/ai.tsx b/packages/ui/src/components/editor/toolbar/ai.tsx
new file mode 100644
index 000000000..a99f73e4c
--- /dev/null
+++ b/packages/ui/src/components/editor/toolbar/ai.tsx
@@ -0,0 +1,27 @@
+import { AISummary } from '../../panels/aiSummary.tsx';
+import { IconButton, Tooltip } from '@tokens-studio/ui';
+import {
+    useOpenPanel
+} from '@tokens-studio/graph-editor';
+import React from 'react';
+import Sparks from '@tokens-studio/icons/Sparks.js';
+
+export const AiSummary = () => {
+    const { toggle } = useOpenPanel();
+    return (
+        <Tooltip label='Artificial intelligence' side='bottom'>
+            <IconButton
+                emphasis='low'
+                onClick={() =>
+                    toggle({
+                        group: 'popout',
+                        title: 'Artificial intelligence',
+                        id: 'ai',
+                        content: <AISummary />
+                    })
+                }
+                icon={<Sparks />}
+            />
+        </Tooltip>
+    );
+};
diff --git a/packages/ui/src/components/editor/toolbar/index.tsx b/packages/ui/src/components/editor/toolbar/index.tsx
new file mode 100644
index 000000000..b596a7e6b
--- /dev/null
+++ b/packages/ui/src/components/editor/toolbar/index.tsx
@@ -0,0 +1,107 @@
+import {
+    AddDropdown,
+    AlignDropdown,
+    DownloadToolbarButton,
+    HelpDropdown,
+    type ImperativeEditorRef,
+    LayoutDropdown,
+    PlayControls,
+    SettingsToolbarButton,
+    ToolbarSeparator,
+    UploadToolbarButton,
+    ZoomDropdown,
+    mainGraphSelector,
+    useOpenPanel
+} from '@tokens-studio/graph-editor';
+
+import { AiSummary } from './ai.tsx';
+import { IconButton, Tooltip } from '@tokens-studio/ui';
+import { Preview } from '../../panels/preview.tsx';
+import { client } from '@/api/sdk/index.ts';
+import { useErrorToast } from '@/hooks/useToast.tsx';
+import { useSelector } from 'react-redux';
+import FloppyDisk from '@tokens-studio/icons/FloppyDisk.js';
+import React from 'react';
+import XrayView from '@tokens-studio/icons/XrayView.js';
+
+
+
+export const SaveButton = ({ id }) => {
+    const mainGraph = useSelector(mainGraphSelector);
+    const graphRef = mainGraph?.ref as ImperativeEditorRef | undefined;
+    const { mutateAsync, isPending, error } =
+        client.graph.updateGraph.useMutation();
+
+    useErrorToast(error);
+
+    const onSave = async () => {
+        if (!graphRef || isPending) return;
+
+        const saved = graphRef!.save();
+
+        await mutateAsync({
+            params: {
+                id
+            },
+            body: {
+                graph: saved as any
+            }
+        });
+    };
+
+    return (
+        <Tooltip label='Save' side='bottom'>
+            <IconButton
+                emphasis='low'
+                loading={isPending}
+                onClick={onSave}
+                icon={<FloppyDisk />}
+            />
+        </Tooltip>
+    );
+};
+
+
+export const PreviewButton = () => {
+    const { toggle } = useOpenPanel();
+    return (
+        <Tooltip label='Preview' side='bottom'>
+            <IconButton
+                emphasis='low'
+                onClick={() =>
+                    toggle({
+                        group: 'popout',
+                        title: 'Preview',
+                        id: 'preview',
+                        content: <Preview />
+                    })
+                }
+                icon={<XrayView />}
+            />
+        </Tooltip>
+    );
+};
+
+export const createToolbarButtons = (buttons?: React.ReactElement) => {
+    return (
+        <>
+            <AddDropdown />
+            <ToolbarSeparator />
+            <ZoomDropdown />
+            <ToolbarSeparator />
+            <AlignDropdown />
+            <ToolbarSeparator />
+            <PlayControls />
+            <ToolbarSeparator />
+            <LayoutDropdown />
+            <SettingsToolbarButton />
+            <HelpDropdown />
+            <AiSummary />
+            <PreviewButton />
+            <ToolbarSeparator />
+            <DownloadToolbarButton />
+            <UploadToolbarButton />
+            {buttons}
+        </>
+    );
+};
diff --git a/packages/ui/src/components/editor/toolbar/share.tsx b/packages/ui/src/components/editor/toolbar/share.tsx
new file mode 100644
index 000000000..e047137fd
--- /dev/null
+++ b/packages/ui/src/components/editor/toolbar/share.tsx
@@ -0,0 +1,62 @@
+
+import { IconButton, Tooltip } from '@tokens-studio/ui';
+import { ShareAndroidSolid } from 'iconoir-react';
+import { SharePopover } from '../../share/index.tsx';
+import { client } from '@/api/sdk/index.ts';
+import { useErrorToast } from '@/hooks/useToast.tsx';
+import React from 'react';
+
+let origin = '';
+if (typeof window !== 'undefined') {
+    window.location.protocol;
+    origin = window.location.origin;
+}
+
+
+export const ShareButton = ({ id }) => {
+    const { mutateAsync, isPending, error } =
+        client.graph.updateGraph.useMutation();
+
+    const [shareOpen, setShareOpen] = React.useState(false);
+
+    useErrorToast(error);
+
+    const onShare = async () => {
+        if (isPending) return;
+
+        try {
+            await mutateAsync({
+                params: {
+                    id
+                },
+                body: {
+                    public: true
+                }
+            });
+            setShareOpen(true);
+        } catch (err) {
+            //Nothing
+        }
+    };
+
+    const onClose = () => {
+        setShareOpen(false);
+    };
+
+    return (
+        <SharePopover
+            open={shareOpen}
+            onClose={onClose}
+            link={`${origin}/editor/${id}`}
+        >
+            <Tooltip label='Share' side='bottom'>
+                <IconButton
+                    emphasis='low'
+                    onClick={onShare}
+                    loading={isPending}
+                    icon={<ShareAndroidSolid />}
+                />
+            </Tooltip>
+        </SharePopover>
+    );
+};

From 328ba9bc68b6f8d22cc6c3250b5aac834d3d4c70 Mon Sep 17 00:00:00 2001
From: SorsOps <80043879+sorsOps@users.noreply.github.com>
Date: Wed, 7 Aug 2024 10:18:05 +0200
Subject: [PATCH 05/10] Seperate out control flow and dataflow engines

---
 .changeset/curvy-ghosts-love.md               |    5 +
 .changeset/cyan-wombats-drum.md               |    5 +
 .changeset/fluffy-dragons-matter.md           |    5 +
 .changeset/green-ladybugs-warn.md             |    5 +
 .changeset/hot-feet-do.md                     |    5 +
 .changeset/hot-swans-hug.md                   |    5 +
 .changeset/khaki-timers-brush.md              |    5 +
 .changeset/lemon-clocks-double.md             |    5 +
 .changeset/light-donkeys-lie.md               |    5 +
 .changeset/long-shoes-occur.md                |    5 +
 .changeset/old-birds-attend.md                |    5 +
 .changeset/popular-seas-pretend.md            |    5 +
 .changeset/quick-jeans-hammer.md              |    5 +
 .changeset/silver-dolls-joke.md               |    5 +
 .changeset/slow-humans-fold.md                |    5 +
 .changeset/tame-queens-relate.md              |    5 +
 .changeset/thin-files-beg.md                  |    5 +
 .changeset/yellow-carrots-tan.md              |    5 +
 .../developers/engine/creating-a-node.md      |    6 +-
 .../guides/developers/engine/programmatic.md  |    5 -
 packages/graph-editor/package.json            |    2 +-
 .../contextMenus/nodeContextMenu.tsx          |   12 +-
 .../contextMenus/paneContextMenu.tsx          |    2 +-
 .../contextMenus/selectionContextMenu.tsx     |   28 +-
 .../src/components/controls/interface.tsx     |    4 +-
 .../src/components/controls/vec3.tsx          |   41 -
 .../src/components/flow/handles.tsx           |    2 +-
 .../src/components/flow/wrapper/nodeV2.tsx    |   30 +-
 .../src/components/hotKeys/index.tsx          |   35 +
 .../src/components/menubar/defaults.tsx       |   14 -
 .../src/components/panels/shortcuts/index.tsx |   66 +
 .../src/components/portPanel/index.tsx        |   34 +-
 .../components/toolbar/dropdowns/layout.tsx   |   11 +-
 .../src/components/toolbar/layoutButtons.tsx  |   23 +-
 packages/graph-editor/src/context/graph.tsx   |    9 +-
 .../src/editor/actions/connect.ts             |  180 +-
 .../src/editor/actions/copyNodes.tsx          |    4 +-
 .../src/editor/actions/createNode.tsx         |   16 +-
 .../src/editor/actions/deleteNode.tsx         |    4 +-
 .../src/editor/actions/duplicate.ts           |  171 +-
 .../src/editor/actions/provider.tsx           |    2 +-
 .../graph-editor/src/editor/editorTypes.ts    |    8 +-
 packages/graph-editor/src/editor/graph.tsx    |   34 +-
 .../src/hooks/useIsValidConnection.ts         |   24 +-
 .../graph-editor/src/redux/models/graph.ts    |   17 +-
 .../graph-editor/src/redux/models/registry.ts |    2 +-
 .../graph-editor/src/registry/control.tsx     |   34 +-
 .../src/registry/inputControls.tsx            |   15 +-
 .../graph-editor/src/registry/specifics.tsx   |   26 +-
 packages/graph-editor/src/types/index.ts      |    3 +
 packages/graph-editor/vite.config.ts          |    4 +
 packages/graph-engine/package.json            |    5 +-
 .../src/capabilities/controlFlow.ts           |  107 +
 .../graph-engine/src/capabilities/dataflow.ts |  327 +
 .../src/capabilities/interface.ts             |   33 +
 .../graph-engine/src/capabilities/secret.ts   |    2 +-
 packages/graph-engine/src/graph/graph.ts      |  415 +-
 packages/graph-engine/src/index.ts            |   14 +
 .../src/nodes/accessibility/colorBlindness.ts |   10 +-
 .../src/nodes/array/arraySubgraph.ts          |   16 +-
 .../graph-engine/src/nodes/array/arrify.ts    |    9 +-
 .../graph-engine/src/nodes/array/concat.ts    |   11 +-
 .../graph-engine/src/nodes/array/filter.ts    |   15 +-
 packages/graph-engine/src/nodes/array/find.ts |   13 +-
 .../graph-engine/src/nodes/array/flatten.ts   |    8 +-
 .../src/nodes/array/indexArray.ts             |   12 +-
 packages/graph-engine/src/nodes/array/push.ts |   10 +-
 .../graph-engine/src/nodes/array/reverse.ts   |    8 +-
 .../graph-engine/src/nodes/array/slice.ts     |   12 +-
 packages/graph-engine/src/nodes/array/sort.ts |   13 +-
 .../src/nodes/color/colorToString.ts          |   26 +-
 .../graph-engine/src/nodes/color/contrast.ts  |   14 +-
 .../src/nodes/color/contrasting.ts            |   21 +-
 .../src/nodes/color/contrastingAlpha.ts       |   24 +-
 .../graph-engine/src/nodes/color/convert.ts   |   16 +-
 .../graph-engine/src/nodes/color/create.ts    |   20 +-
 .../graph-engine/src/nodes/color/darken.ts    |   12 +-
 .../src/nodes/color/deconstruct.ts            |   30 +-
 .../graph-engine/src/nodes/color/deltaE.ts    |   14 +-
 .../graph-engine/src/nodes/color/distance.ts  |   17 +-
 .../src/nodes/color/flattenAlpha.ts           |   10 +-
 .../graph-engine/src/nodes/color/lighten.ts   |   12 +-
 packages/graph-engine/src/nodes/color/mix.ts  |   18 +-
 packages/graph-engine/src/nodes/color/name.ts |    8 +-
 .../graph-engine/src/nodes/color/poline.ts    |   20 +-
 .../graph-engine/src/nodes/color/scale.ts     |   12 +-
 .../src/nodes/color/sortByDistance.ts         |   48 +-
 .../src/nodes/color/stringToColor.ts          |    8 +-
 .../graph-engine/src/nodes/color/wheel.ts     |   16 +-
 packages/graph-engine/src/nodes/css/box.ts    |   14 +-
 .../graph-engine/src/nodes/css/cssFunction.ts |   10 +-
 packages/graph-engine/src/nodes/css/map.ts    |    8 +-
 .../graph-engine/src/nodes/curves/bezier.ts   |   17 +-
 .../src/nodes/curves/floatCurve.ts            |   10 +-
 .../src/nodes/curves/presetBeziers.ts         |   11 +-
 .../graph-engine/src/nodes/curves/sample.ts   |   16 +-
 .../src/nodes/generic/constant.ts             |    8 +-
 .../graph-engine/src/nodes/generic/delay.ts   |   54 -
 .../graph-engine/src/nodes/generic/index.ts   |    7 +-
 .../graph-engine/src/nodes/generic/input.ts   |   18 +-
 .../graph-engine/src/nodes/generic/note.ts    |    4 +-
 .../src/nodes/generic/objectMerge.ts          |   10 +-
 .../src/nodes/generic/objectProperty.ts       |   17 +-
 .../src/nodes/generic/objectify.ts            |   11 +-
 .../graph-engine/src/nodes/generic/output.ts  |   15 +-
 .../graph-engine/src/nodes/generic/panic.ts   |    6 +-
 .../src/nodes/generic/passthrough.ts          |    8 +-
 .../src/nodes/generic/subgraph.ts             |   48 +-
 .../src/nodes/generic/testDraw.ts             |    0
 .../graph-engine/src/nodes/generic/time.ts    |   44 -
 .../src/nodes/gradient/gradientStop.ts        |   10 +-
 packages/graph-engine/src/nodes/index.ts      |   10 +-
 packages/graph-engine/src/nodes/logic/and.ts  |    8 +-
 .../graph-engine/src/nodes/logic/compare.ts   |   23 +-
 packages/graph-engine/src/nodes/logic/if.ts   |   12 +-
 packages/graph-engine/src/nodes/logic/not.ts  |    8 +-
 packages/graph-engine/src/nodes/logic/or.ts   |    8 +-
 .../graph-engine/src/nodes/logic/switch.ts    |   19 +-
 packages/graph-engine/src/nodes/math/abs.ts   |    8 +-
 packages/graph-engine/src/nodes/math/add.ts   |   10 +-
 .../src/nodes/math/addVariadic.ts             |    8 +-
 packages/graph-engine/src/nodes/math/ceil.ts  |    8 +-
 packages/graph-engine/src/nodes/math/clamp.ts |   12 +-
 packages/graph-engine/src/nodes/math/cos.ts   |    8 +-
 packages/graph-engine/src/nodes/math/count.ts |    8 +-
 .../graph-engine/src/nodes/math/divide.ts     |   10 +-
 .../src/nodes/math/divideVariadic.ts          |    8 +-
 packages/graph-engine/src/nodes/math/eval.ts  |   16 +-
 packages/graph-engine/src/nodes/math/exp.ts   |    8 +-
 packages/graph-engine/src/nodes/math/floor.ts |    8 +-
 packages/graph-engine/src/nodes/math/fluid.ts |   18 +-
 packages/graph-engine/src/nodes/math/lerp.ts  |   12 +-
 packages/graph-engine/src/nodes/math/mod.ts   |   10 +-
 .../graph-engine/src/nodes/math/multiply.ts   |   10 +-
 .../src/nodes/math/multiplyVariadic.ts        |    8 +-
 packages/graph-engine/src/nodes/math/pow.ts   |   10 +-
 .../graph-engine/src/nodes/math/random.ts     |    6 +-
 .../src/nodes/math/rangeMapping.ts            |   21 +-
 packages/graph-engine/src/nodes/math/round.ts |   10 +-
 packages/graph-engine/src/nodes/math/sin.ts   |    8 +-
 packages/graph-engine/src/nodes/math/sqrt.ts  |    8 +-
 .../graph-engine/src/nodes/math/subtract.ts   |   10 +-
 .../src/nodes/math/subtractVariadic.ts        |    8 +-
 packages/graph-engine/src/nodes/math/tan.ts   |    8 +-
 .../src/nodes/network/anthropic.ts            |   88 +
 .../graph-engine/src/nodes/network/delay.ts   |   62 +
 .../src/nodes/network/fetchJson.ts            |   55 +
 .../graph-engine/src/nodes/network/hold.ts    |   47 +
 .../graph-engine/src/nodes/network/index.ts   |   19 +
 .../src/nodes/network/passthrough.ts          |   26 +
 .../graph-engine/src/nodes/network/start.ts   |   24 +
 .../graph-engine/src/nodes/network/time.ts    |   46 +
 .../src/nodes/network/toMessage.ts            |   58 +
 .../src/nodes/preview/colorCompare.ts         |   10 +-
 .../src/nodes/preview/colorScale.ts           |    6 +-
 .../graph-engine/src/nodes/preview/curve.ts   |    6 +-
 .../src/nodes/preview/mathExpression.ts       |   12 +-
 .../graph-engine/src/nodes/preview/number.ts  |    8 +-
 .../graph-engine/src/nodes/preview/swatch.ts  |    6 +-
 .../graph-engine/src/nodes/secret/retrieve.ts |   10 +-
 .../src/nodes/series/arithmetic.ts            |   21 +-
 .../src/nodes/series/geometric.ts             |   18 +-
 .../graph-engine/src/nodes/series/harmonic.ts |   20 +-
 .../src/nodes/string/interpolate.ts           |   15 +-
 .../graph-engine/src/nodes/string/join.ts     |   10 +-
 .../src/nodes/string/lowercase.ts             |    8 +-
 packages/graph-engine/src/nodes/string/pad.ts |   14 +-
 .../graph-engine/src/nodes/string/regex.ts    |   14 +-
 .../graph-engine/src/nodes/string/split.ts    |   15 +-
 .../src/nodes/string/stringify.ts             |    8 +-
 .../src/nodes/string/uppercase.ts             |    8 +-
 .../src/nodes/typing/assertDefined.ts         |    8 +-
 .../graph-engine/src/nodes/typing/hasValue.ts |    8 +-
 .../src/nodes/typing/parseUnit.ts             |   10 +-
 .../graph-engine/src/nodes/typing/passUnit.ts |   11 +-
 .../src/nodes/typography/baseFontSize.ts      |   22 +-
 .../graph-engine/src/nodes/vector2/create.ts  |   10 +-
 .../src/nodes/vector2/destructure.ts          |   10 +-
 .../src/programmatic/annotated.ts             |   22 +
 .../src/programmatic/controlflow/base.ts      |   39 +
 .../src/programmatic/controlflow/input.ts     |   45 +
 .../src/programmatic/controlflow/output.ts    |   38 +
 .../src/programmatic/dataflow/base.ts         |   56 +
 .../src/programmatic/dataflow/input.ts        |  181 +
 .../src/programmatic/dataflow/output.ts       |   89 +
 .../graph-engine/src/programmatic/edge.ts     |   24 +-
 .../src/programmatic/nodes/controlflow.ts     |   89 +
 .../src/programmatic/nodes/dataflow.ts        |  121 +
 .../src/programmatic/nodes/node.ts            |  273 +
 .../graph-engine/src/programmatic/port.ts     |   75 +-
 packages/graph-engine/src/schemas/index.ts    |   79 -
 packages/graph-engine/src/utils/dedupe.ts     |    1 +
 packages/graph-engine/src/utils/graph.ts      |   52 +
 .../graph-engine/tests/suites/basic.test.ts   |    6 +-
 .../tests/suites/enqueing.test.ts             |    6 +-
 .../tests/suites/nodeUsage.test.ts            |   12 +-
 .../tests/suites/nodes/array/concat.test.ts   |    1 -
 .../tests/suites/nodes/array/flatten.test.ts  |    5 +-
 .../suites/nodes/array/indexArray.test.ts     |    5 +-
 .../tests/suites/nodes/array/push.test.ts     |    3 +-
 .../tests/suites/nodes/array/reverse.test.ts  |    3 +-
 .../tests/suites/nodes/array/sort.test.ts     |    5 +-
 .../suites/nodes/color/contrasting.test.ts    |    6 +-
 .../tests/suites/nodes/color/create.test.ts   |    3 +-
 .../tests/suites/nodes/css/box.test.ts        |    3 +-
 .../tests/suites/nodes/math/abs.test.ts       |    3 +-
 .../tests/suites/nodes/math/add.test.ts       |    3 +-
 .../tests/suites/nodes/math/multiply.test.ts  |    3 +-
 .../nodes/math/multiplyVariadic.test.ts       |    3 +-
 .../tests/suites/nodes/math/pow.test.ts       |    3 +-
 .../tests/suites/nodes/math/sub.test.ts       |    3 +-
 .../tests/suites/nodes/network/delay.test.ts  |   30 +
 .../tests/suites/nodes/network/hold.test.ts   |   14 +
 .../suites/nodes/series/harmonic.test.ts      |    3 +-
 packages/graph-engine/tests/utils/index.ts    |   43 +
 packages/nodes-audio/src/nodes/base.ts        |    4 +-
 packages/nodes-audio/src/nodes/connect.ts     |   10 +-
 packages/nodes-audio/src/nodes/delay.ts       |   14 +-
 packages/nodes-audio/src/nodes/gain.ts        |   13 +-
 packages/nodes-audio/src/nodes/loadBuffer.ts  |   12 +-
 packages/nodes-audio/src/nodes/oscillator.ts  |   13 +-
 packages/nodes-audio/src/nodes/output.ts      |    8 +-
 packages/nodes-audio/src/nodes/source.ts      |   13 +-
 packages/nodes-audio/src/nodes/whiteNoise.ts  |   13 +-
 .../src/nodes/arrayToSet.ts                   |    8 +-
 .../nodes-design-tokens/src/nodes/create.ts   |   18 +-
 .../src/nodes/createBorder.ts                 |   12 +-
 .../src/nodes/createBorderToken.ts            |   16 +-
 .../src/nodes/createBoxShadow.ts              |   26 +-
 .../src/nodes/createBoxShadowToken.ts         |   16 +-
 .../src/nodes/createTypography.ts             |   22 +-
 .../src/nodes/createTypographyToken.ts        |   24 +-
 .../src/nodes/destructToken.ts                |   22 +-
 .../src/nodes/externalTokens.ts               |    8 +-
 .../src/nodes/extractSingleToken.ts           |   12 +-
 .../nodes-design-tokens/src/nodes/flatten.ts  |    8 +-
 .../nodes-design-tokens/src/nodes/group.ts    |   10 +-
 .../nodes-design-tokens/src/nodes/index.ts    |    3 +-
 .../src/nodes/inlineTokens.ts                 |    8 +-
 .../nodes-design-tokens/src/nodes/invert.ts   |    8 +-
 .../src/nodes/leonardoColor.ts                |   14 +-
 .../src/nodes/leonardoTheme.ts                |   16 +-
 .../nodes-design-tokens/src/nodes/name.ts     |    8 +-
 .../src/nodes/previewTypography.ts            |    8 +-
 .../nodes-design-tokens/src/nodes/resolve.ts  |   10 +-
 .../src/nodes/setToArray.ts                   |    8 +-
 .../nodes-design-tokens/src/nodes/ungroup.ts  |   12 +-
 .../src/ui/controls/index.tsx                 |    6 +-
 packages/nodes-fs/src/capability/fs.ts        |    4 +
 .../nodes-fs/src/nodes/getDirectoryListing.ts |   12 +-
 packages/nodes-fs/src/nodes/getFile.ts        |   14 +-
 packages/nodes-fs/src/nodes/getJson.ts        |   10 +-
 packages/nodes-fs/src/nodes/getText.ts        |   10 +-
 packages/nodes-fs/src/nodes/index.ts          |    3 +-
 packages/nodes-fs/src/ui/controls/index.tsx   |    4 +-
 packages/nodes-image/src/nodes/autoLevel.ts   |   16 +-
 packages/nodes-image/src/nodes/autoOrient.ts  |   17 +-
 packages/nodes-image/src/nodes/base.ts        |    4 +-
 packages/nodes-image/src/nodes/blur.ts        |    8 +-
 packages/nodes-image/src/nodes/charcoal.ts    |   13 +-
 packages/nodes-image/src/nodes/compose.ts     |   13 +-
 packages/nodes-image/src/nodes/dither.ts      |   10 +-
 packages/nodes-image/src/nodes/flip.ts        |   17 +-
 packages/nodes-image/src/nodes/flop.ts        |   17 +-
 .../nodes-image/src/nodes/gaussianBlur.ts     |    8 +-
 packages/nodes-image/src/nodes/grayscale.ts   |    4 +-
 packages/nodes-image/src/nodes/load.ts        |    4 +-
 packages/nodes-image/src/nodes/morphology.ts  |    8 +-
 packages/nodes-image/src/nodes/negate.ts      |    4 +-
 packages/nodes-image/src/nodes/oilpaint.ts    |    6 +-
 packages/nodes-image/src/nodes/preview.ts     |    2 +-
 packages/nodes-image/src/nodes/properties.ts  |   16 +-
 packages/nodes-image/src/nodes/resize.ts      |   10 +-
 packages/nodes-image/src/nodes/rotate.ts      |   13 +-
 packages/nodes-image/src/nodes/seperate.ts    |   15 +-
 packages/nodes-image/src/nodes/sepia.ts       |    4 +-
 packages/nodes-image/src/nodes/sharpen.ts     |    8 +-
 packages/nodes-image/src/nodes/solarize.ts    |   16 +-
 packages/nodes-image/src/nodes/vignette.ts    |   21 +-
 packages/ui/package.json                      |    3 +-
 .../capabilities/.gitkeep                     |    0
 .../editor/contexts/.gitkeep                  |    0
 .../editor/controls/.gitkeep                  |    0
 .../editor/icons/.gitkeep                     |    0
 .../editor/nodes/.gitkeep                     |    0
 .../graphs/test/description.md                |    1 +
 .../graphs/test/graph.metadata.json           |   23 -
 .../graphs/test/metadata.yaml                 |   25 +
 .../graphs/test/screenshot.png                |    0
 .../vscode-example-workspace/metadata.json    |   20 -
 .../vscode-example-workspace/metadata.yaml    |   17 +
 .../nodes/example/description.md              |    1 +
 .../nodes/example/index.ts                    |   12 +-
 .../nodes/example/metadata.yaml               |   19 +
 .../nodes/example/screenshot.png              |    0
 packages/vscode-example-workspace/user.json   |    4 -
 packages/vscode-example-workspace/user.yaml   |    3 +
 packages/vscode-extension/package.json        |   18 +-
 yarn.lock                                     | 6381 +++++++++++------
 299 files changed, 8171 insertions(+), 4170 deletions(-)
 create mode 100644 .changeset/curvy-ghosts-love.md
 create mode 100644 .changeset/cyan-wombats-drum.md
 create mode 100644 .changeset/fluffy-dragons-matter.md
 create mode 100644 .changeset/green-ladybugs-warn.md
 create mode 100644 .changeset/hot-feet-do.md
 create mode 100644 .changeset/hot-swans-hug.md
 create mode 100644 .changeset/khaki-timers-brush.md
 create mode 100644 .changeset/lemon-clocks-double.md
 create mode 100644 .changeset/light-donkeys-lie.md
 create mode 100644 .changeset/long-shoes-occur.md
 create mode 100644 .changeset/old-birds-attend.md
 create mode 100644 .changeset/popular-seas-pretend.md
 create mode 100644 .changeset/quick-jeans-hammer.md
 create mode 100644 .changeset/silver-dolls-joke.md
 create mode 100644 .changeset/slow-humans-fold.md
 create mode 100644 .changeset/tame-queens-relate.md
 create mode 100644 .changeset/thin-files-beg.md
 create mode 100644 .changeset/yellow-carrots-tan.md
 delete mode 100644 packages/graph-editor/src/components/controls/vec3.tsx
 create mode 100644 packages/graph-editor/src/components/panels/shortcuts/index.tsx
 create mode 100644 packages/graph-engine/src/capabilities/controlFlow.ts
 create mode 100644 packages/graph-engine/src/capabilities/dataflow.ts
 create mode 100644 packages/graph-engine/src/capabilities/interface.ts
 delete mode 100644 packages/graph-engine/src/nodes/generic/delay.ts
 create mode 100644 packages/graph-engine/src/nodes/generic/testDraw.ts
 delete mode 100644 packages/graph-engine/src/nodes/generic/time.ts
 create mode 100644 packages/graph-engine/src/nodes/network/anthropic.ts
 create mode 100644 packages/graph-engine/src/nodes/network/delay.ts
 create mode 100644 packages/graph-engine/src/nodes/network/fetchJson.ts
 create mode 100644 packages/graph-engine/src/nodes/network/hold.ts
 create mode 100644 packages/graph-engine/src/nodes/network/index.ts
 create mode 100644 packages/graph-engine/src/nodes/network/passthrough.ts
 create mode 100644 packages/graph-engine/src/nodes/network/start.ts
 create mode 100644 packages/graph-engine/src/nodes/network/time.ts
 create mode 100644 packages/graph-engine/src/nodes/network/toMessage.ts
 create mode 100644 packages/graph-engine/src/programmatic/annotated.ts
 create mode 100644 packages/graph-engine/src/programmatic/controlflow/base.ts
 create mode 100644 packages/graph-engine/src/programmatic/controlflow/input.ts
 create mode 100644 packages/graph-engine/src/programmatic/controlflow/output.ts
 create mode 100644 packages/graph-engine/src/programmatic/dataflow/base.ts
 create mode 100644 packages/graph-engine/src/programmatic/dataflow/input.ts
 create mode 100644 packages/graph-engine/src/programmatic/dataflow/output.ts
 create mode 100644 packages/graph-engine/src/programmatic/nodes/controlflow.ts
 create mode 100644 packages/graph-engine/src/programmatic/nodes/dataflow.ts
 create mode 100644 packages/graph-engine/src/programmatic/nodes/node.ts
 create mode 100644 packages/graph-engine/src/utils/dedupe.ts
 create mode 100644 packages/graph-engine/src/utils/graph.ts
 create mode 100644 packages/graph-engine/tests/suites/nodes/network/delay.test.ts
 create mode 100644 packages/graph-engine/tests/suites/nodes/network/hold.test.ts
 create mode 100644 packages/graph-engine/tests/utils/index.ts
 create mode 100644 packages/vscode-example-workspace/capabilities/.gitkeep
 create mode 100644 packages/vscode-example-workspace/editor/contexts/.gitkeep
 create mode 100644 packages/vscode-example-workspace/editor/controls/.gitkeep
 create mode 100644 packages/vscode-example-workspace/editor/icons/.gitkeep
 create mode 100644 packages/vscode-example-workspace/editor/nodes/.gitkeep
 create mode 100644 packages/vscode-example-workspace/graphs/test/description.md
 delete mode 100644 packages/vscode-example-workspace/graphs/test/graph.metadata.json
 create mode 100644 packages/vscode-example-workspace/graphs/test/metadata.yaml
 create mode 100644 packages/vscode-example-workspace/graphs/test/screenshot.png
 delete mode 100644 packages/vscode-example-workspace/metadata.json
 create mode 100644 packages/vscode-example-workspace/metadata.yaml
 create mode 100644 packages/vscode-example-workspace/nodes/example/description.md
 create mode 100644 packages/vscode-example-workspace/nodes/example/metadata.yaml
 create mode 100644 packages/vscode-example-workspace/nodes/example/screenshot.png
 delete mode 100644 packages/vscode-example-workspace/user.json
 create mode 100644 packages/vscode-example-workspace/user.yaml

diff --git a/.changeset/curvy-ghosts-love.md b/.changeset/curvy-ghosts-love.md
new file mode 100644
index 000000000..47673dbb7
--- /dev/null
+++ b/.changeset/curvy-ghosts-love.md
@@ -0,0 +1,5 @@
+---
+"@tokens-studio/graph-engine": major
+---
+
+Removed the COLOR_OBJECT, VEC3, DIMENSION schemas
diff --git a/.changeset/cyan-wombats-drum.md b/.changeset/cyan-wombats-drum.md
new file mode 100644
index 000000000..5f386bbd3
--- /dev/null
+++ b/.changeset/cyan-wombats-drum.md
@@ -0,0 +1,5 @@
+---
+"@tokens-studio/graph-engine": major
+---
+
+Removed the `checkCapabilitites` function on the Graph.
diff --git a/.changeset/fluffy-dragons-matter.md b/.changeset/fluffy-dragons-matter.md
new file mode 100644
index 000000000..f0c1f8d46
--- /dev/null
+++ b/.changeset/fluffy-dragons-matter.md
@@ -0,0 +1,5 @@
+---
+"@tokens-studio/graph-editor": patch
+---
+
+Adds a shortcut panel to visualize the shortcuts
diff --git a/.changeset/green-ladybugs-warn.md b/.changeset/green-ladybugs-warn.md
new file mode 100644
index 000000000..90c7e0556
--- /dev/null
+++ b/.changeset/green-ladybugs-warn.md
@@ -0,0 +1,5 @@
+---
+"@tokens-studio/graph-engine": major
+---
+
+Removed the setNode method on the Port
diff --git a/.changeset/hot-feet-do.md b/.changeset/hot-feet-do.md
new file mode 100644
index 000000000..f0622ab9f
--- /dev/null
+++ b/.changeset/hot-feet-do.md
@@ -0,0 +1,5 @@
+---
+"@tokens-studio/graph-engine": major
+---
+
+Changed the Changed the internal conversion of the engine to no longer attempt to convert types. This should be handle in the editor rather
diff --git a/.changeset/hot-swans-hug.md b/.changeset/hot-swans-hug.md
new file mode 100644
index 000000000..6a3540827
--- /dev/null
+++ b/.changeset/hot-swans-hug.md
@@ -0,0 +1,5 @@
+---
+"@tokens-studio/graph-engine": major
+---
+
+.predecessors is no longer a method on the Graph object, but is instead exported as a standalone function
diff --git a/.changeset/khaki-timers-brush.md b/.changeset/khaki-timers-brush.md
new file mode 100644
index 000000000..8269098d1
--- /dev/null
+++ b/.changeset/khaki-timers-brush.md
@@ -0,0 +1,5 @@
+---
+"@tokens-studio/graph-engine": patch
+---
+
+Removed the .load method from Nodes, the .loadResource method from the Graph object and the externalLoader from the graph
diff --git a/.changeset/lemon-clocks-double.md b/.changeset/lemon-clocks-double.md
new file mode 100644
index 000000000..aff5b6dcc
--- /dev/null
+++ b/.changeset/lemon-clocks-double.md
@@ -0,0 +1,5 @@
+---
+"@tokens-studio/graph-engine": major
+---
+
+.update, .propagate, and .execute  are now no longer methods on the Graph object and instead belong to the dataflow capability
diff --git a/.changeset/light-donkeys-lie.md b/.changeset/light-donkeys-lie.md
new file mode 100644
index 000000000..876dbee49
--- /dev/null
+++ b/.changeset/light-donkeys-lie.md
@@ -0,0 +1,5 @@
+---
+"@tokens-studio/graph-engine": major
+---
+
+The groups property on the node base class has been removed
diff --git a/.changeset/long-shoes-occur.md b/.changeset/long-shoes-occur.md
new file mode 100644
index 000000000..a62806a9d
--- /dev/null
+++ b/.changeset/long-shoes-occur.md
@@ -0,0 +1,5 @@
+---
+"@tokens-studio/graph-engine": major
+---
+
+Removed .start, .stop, .pause, .resume from the graph and instead created a new ControlFlow class which can be added to a graph as a capability
diff --git a/.changeset/old-birds-attend.md b/.changeset/old-birds-attend.md
new file mode 100644
index 000000000..0e7b5e04e
--- /dev/null
+++ b/.changeset/old-birds-attend.md
@@ -0,0 +1,5 @@
+---
+"@tokens-studio/graph-engine": major
+---
+
+extractTypes no longer exists as a static method on the Graph class and can instead be imported as a standalone function
diff --git a/.changeset/popular-seas-pretend.md b/.changeset/popular-seas-pretend.md
new file mode 100644
index 000000000..bc8335d79
--- /dev/null
+++ b/.changeset/popular-seas-pretend.md
@@ -0,0 +1,5 @@
+---
+"@tokens-studio/graph-engine": major
+---
+
+hasConnectedInput has been removed as a method on the graph. It can be imported now as a standalone function
diff --git a/.changeset/quick-jeans-hammer.md b/.changeset/quick-jeans-hammer.md
new file mode 100644
index 000000000..b131e620e
--- /dev/null
+++ b/.changeset/quick-jeans-hammer.md
@@ -0,0 +1,5 @@
+---
+"@tokens-studio/graph-editor": patch
+---
+
+Made the context menu styling consistent
diff --git a/.changeset/silver-dolls-joke.md b/.changeset/silver-dolls-joke.md
new file mode 100644
index 000000000..e6a0789a8
--- /dev/null
+++ b/.changeset/silver-dolls-joke.md
@@ -0,0 +1,5 @@
+---
+"@tokens-studio/graph-engine": major
+---
+
+Capabilities are now no longer shared by default and are instead registered again on any cloned graphs
diff --git a/.changeset/slow-humans-fold.md b/.changeset/slow-humans-fold.md
new file mode 100644
index 000000000..9cb260e3f
--- /dev/null
+++ b/.changeset/slow-humans-fold.md
@@ -0,0 +1,5 @@
+---
+"@tokens-studio/graph-engine": major
+---
+
+Remove the clearOutputs method on Node
diff --git a/.changeset/tame-queens-relate.md b/.changeset/tame-queens-relate.md
new file mode 100644
index 000000000..938d7b555
--- /dev/null
+++ b/.changeset/tame-queens-relate.md
@@ -0,0 +1,5 @@
+---
+"@tokens-studio/graph-engine": major
+---
+
+Removed the `groups` property on the Node object
diff --git a/.changeset/thin-files-beg.md b/.changeset/thin-files-beg.md
new file mode 100644
index 000000000..980b09c1c
--- /dev/null
+++ b/.changeset/thin-files-beg.md
@@ -0,0 +1,5 @@
+---
+"@tokens-studio/graph-engine": major
+---
+
+Removed the buffer type and schema from the engine
diff --git a/.changeset/yellow-carrots-tan.md b/.changeset/yellow-carrots-tan.md
new file mode 100644
index 000000000..823582082
--- /dev/null
+++ b/.changeset/yellow-carrots-tan.md
@@ -0,0 +1,5 @@
+---
+"@tokens-studio/graph-editor": major
+---
+
+Removed the Vec3 Control
diff --git a/packages/documentation/docs/guides/developers/engine/creating-a-node.md b/packages/documentation/docs/guides/developers/engine/creating-a-node.md
index 1cd6f5584..a1cc24768 100644
--- a/packages/documentation/docs/guides/developers/engine/creating-a-node.md
+++ b/packages/documentation/docs/guides/developers/engine/creating-a-node.md
@@ -36,13 +36,13 @@ export default class MyCustomNode extends Node {
   //You will likely want to expose input and output ports for the node
   constructor(props: INodeDefinition) {
     super(props);
-    this.addInput("a", {
+    this.dataflow.addInput("a", {
       type: NumberSchema,
     });
-    this.addInput("b", {
+    this.dataflow.addInput("b", {
       type: NumberSchema,
     });
-    this.addOutput("value", {
+    this.dataflow.addOutput("value", {
       type: NumberSchema,
     });
   }
diff --git a/packages/documentation/docs/guides/developers/engine/programmatic.md b/packages/documentation/docs/guides/developers/engine/programmatic.md
index a6e21e99a..0d301944f 100644
--- a/packages/documentation/docs/guides/developers/engine/programmatic.md
+++ b/packages/documentation/docs/guides/developers/engine/programmatic.md
@@ -25,11 +25,6 @@ const output = new Output({ graph });
 const add = new Add({ graph });
 const div = new Divide({ graph });
 
-//Lets add the nodes explicitly. This makes sure if they apply side effects to the graph on entry that they are seperated from being defined
-graph.addNode(input);
-graph.addNode(output);
-graph.addNode(add);
-graph.addNode(div);
 
 //Create an input port on the input. This would be a dynamic property
 input.addInput("y", {
diff --git a/packages/graph-editor/package.json b/packages/graph-editor/package.json
index b03dcdf7a..b4b2c4efa 100644
--- a/packages/graph-editor/package.json
+++ b/packages/graph-editor/package.json
@@ -90,7 +90,7 @@
     "reselect": "^4.1.8",
     "sentence-case": "^3.0.4",
     "undo-manager": "^1.1.1",
-    "uuid": "^9.0.0"
+    "nanoid": "^5.0.7"
   },
   "peerDependencies": {
     "react": "^18.2.0",
diff --git a/packages/graph-editor/src/components/contextMenus/nodeContextMenu.tsx b/packages/graph-editor/src/components/contextMenus/nodeContextMenu.tsx
index 0e4a6a876..62dac1abf 100644
--- a/packages/graph-editor/src/components/contextMenus/nodeContextMenu.tsx
+++ b/packages/graph-editor/src/components/contextMenus/nodeContextMenu.tsx
@@ -1,5 +1,7 @@
+import { ContextMenuItem } from './ContextMenuStyles.js';
+import { DataflowNode } from '@tokens-studio/graph-engine';
 import { Graph } from 'graphlib';
-import { Item, Menu, Separator } from 'react-contexify';
+import { Menu, Separator } from 'react-contexify';
 import { Node, ReactFlowInstance, useReactFlow } from 'reactflow';
 import { useAction } from '@/editor/actions/provider.js';
 import { useCanDeleteNode } from '@/hooks/useCanDeleteNode.js';
@@ -153,7 +155,7 @@ export const NodeContextMenu = ({ id, nodes }: INodeContextMenuProps) => {
       nodes.forEach((node) => {
         const graphNode = graph.getNode(node.id);
         if (graphNode) {
-          graphNode.run();
+          (graphNode as DataflowNode).dataflow?.run();
         }
       });
     }
@@ -167,11 +169,11 @@ export const NodeContextMenu = ({ id, nodes }: INodeContextMenuProps) => {
       <Separator />
       {nodes?.length == 1 && (
         <>
-          <Item onClick={onTraceSource}>Trace Upstream</Item>
-          <Item onClick={onTraceTarget}>Trace Downstream</Item>
+          <ContextMenuItem onClick={onTraceSource}>Trace Upstream</ContextMenuItem>
+          <ContextMenuItem onClick={onTraceTarget}>Trace Downstream</ContextMenuItem>
         </>
       )}
-      <Item onClick={onResetTrace}>Reset Trace</Item>
+      <ContextMenuItem onClick={onResetTrace}>Reset Trace</ContextMenuItem>
       <Separator />
       <Item disabled={!isDeletable} onClick={deleteEl}>
         Delete
diff --git a/packages/graph-editor/src/components/contextMenus/paneContextMenu.tsx b/packages/graph-editor/src/components/contextMenus/paneContextMenu.tsx
index f828b14f5..4cb1b63ec 100644
--- a/packages/graph-editor/src/components/contextMenus/paneContextMenu.tsx
+++ b/packages/graph-editor/src/components/contextMenus/paneContextMenu.tsx
@@ -14,7 +14,7 @@ export interface IPaneContextMenu<T = unknown> {
   onSelectItem: (item: T) => void;
 }
 
-export const PaneContextMenu = <T = unknown,>({ id }: IPaneContextMenu<T>) => {
+export const PaneContextMenu = <T = unknown>({ id }: IPaneContextMenu<T>) => {
   const reactFlowInstance = useReactFlow();
 
   const frame = useFrame();
diff --git a/packages/graph-editor/src/components/contextMenus/selectionContextMenu.tsx b/packages/graph-editor/src/components/contextMenus/selectionContextMenu.tsx
index a1a09569e..e8993f6ae 100644
--- a/packages/graph-editor/src/components/contextMenus/selectionContextMenu.tsx
+++ b/packages/graph-editor/src/components/contextMenus/selectionContextMenu.tsx
@@ -1,4 +1,4 @@
-import { Edge, Graph } from '@tokens-studio/graph-engine';
+import { DataflowNode, Edge, Graph, Input, Output } from '@tokens-studio/graph-engine';
 import { Item, Menu, Separator } from 'react-contexify';
 import { Node, getRectOfNodes, useReactFlow, useStoreApi } from 'reactflow';
 import { NodeTypes } from '../flow/types.js';
@@ -6,7 +6,7 @@ import { deletable } from '@/annotations/index.js';
 import { getId } from '../flow/utils.js';
 import { useAction } from '@/editor/actions/provider.js';
 import { useLocalGraph } from '@/hooks/index.js';
-import { v4 as uuid } from 'uuid';
+import { nanoid as uuid } from 'nanoid'
 import React, { useCallback } from 'react';
 
 export type INodeContextMenuProps = {
@@ -120,10 +120,10 @@ export const SelectionContextMenu = ({ id, nodes }: INodeContextMenuProps) => {
     const existingInternal = Object.values(internalGraph.nodes);
     const inputNode = existingInternal.find(
       (x) => x.factory.type == 'studio.tokens.generic.input',
-    );
+    ) as DataflowNode | undefined;
     const outputNode = existingInternal.find(
       (x) => x.factory.type == 'studio.tokens.generic.output',
-    );
+    ) as DataflowNode | undefined;
 
     //Now we need to determine the inputs and outputs of the subgraph
     //We need to find the entry nodes and the exit nodes
@@ -174,8 +174,8 @@ export const SelectionContextMenu = ({ id, nodes }: INodeContextMenuProps) => {
     //We need to create a input  for each of the entry edges
     entryEdges.forEach((edge) => {
       //Get the output node of the edge
-      const outputNode = graph.getNode(edge.target);
-      const input = outputNode?.inputs[edge.targetHandle];
+      const outputNode = graph.getNode(edge.target) as DataflowNode;
+      const input = outputNode?.inputs[edge.targetHandle] as Input;
 
       //Its possible that we have a collision with the name so we need to rename it
       const initialName = edge.targetHandle;
@@ -186,15 +186,13 @@ export const SelectionContextMenu = ({ id, nodes }: INodeContextMenuProps) => {
         name = initialName + '_' + count++;
       }
 
-      const newInput = inputNode?.addInput(name, {
+      inputNode?.dataflow.addInput(name, {
         type: input!.type,
       });
-      if (newInput) {
-        newInput.annotations[deletable] = true;
-      }
+      inputNode?.inputs[name]?.setAnnotation(deletable, true);
 
       //The output won't be dynamically generated until the node is executed, so we add it manually
-      inputNode?.addOutput(name, {
+      inputNode?.dataflow.addOutput(name, {
         type: input!.type,
       });
 
@@ -223,7 +221,7 @@ export const SelectionContextMenu = ({ id, nodes }: INodeContextMenuProps) => {
     exitEdges.forEach((edge) => {
       //Get the output node of the edge
       const sourceNode = graph.getNode(edge.source);
-      const sourceOutput = sourceNode?.outputs[edge.sourceHandle];
+      const sourceOutput = sourceNode?.outputs[edge.sourceHandle] as Output;
 
       //Its possible that we have a collision with the name so we need to rename it
       const initialName = edge.targetHandle;
@@ -234,15 +232,15 @@ export const SelectionContextMenu = ({ id, nodes }: INodeContextMenuProps) => {
         name = initialName + '_' + count++;
       }
 
-      outputNode?.addInput(name, {
+      outputNode?.dataflow.addInput(name, {
         type: sourceOutput!.type,
       });
-      outputNode?.addOutput(name, {
+      outputNode?.dataflow.addOutput(name, {
         type: sourceOutput!.type,
       });
 
       //Ensure the output exists on the outer graph node as it will only be dynamically populated once the subgraph has run
-      graphNode.addOutput(name, {
+      (graphNode as DataflowNode).dataflow.addOutput(name, {
         type: sourceOutput!.type,
       });
 
diff --git a/packages/graph-editor/src/components/controls/interface.tsx b/packages/graph-editor/src/components/controls/interface.tsx
index d05d7682d..01b62db37 100644
--- a/packages/graph-editor/src/components/controls/interface.tsx
+++ b/packages/graph-editor/src/components/controls/interface.tsx
@@ -1,7 +1,7 @@
-import { Port } from '@tokens-studio/graph-engine';
+import type { DataFlowPort } from '@tokens-studio/graph-engine';
 import { SystemSettings } from '@/system/frame/settings.js';
 export interface IField {
-  port: Port;
+  port: DataFlowPort;
   readOnly?: boolean;
   settings: SystemSettings;
 }
diff --git a/packages/graph-editor/src/components/controls/vec3.tsx b/packages/graph-editor/src/components/controls/vec3.tsx
deleted file mode 100644
index fdb943e53..000000000
--- a/packages/graph-editor/src/components/controls/vec3.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { IField } from './interface.js';
-import { Input } from '@tokens-studio/graph-engine';
-import { Label, Stack, TextInput } from '@tokens-studio/ui';
-import { observer } from 'mobx-react-lite';
-import React from 'react';
-
-export const Vec3field = observer(({ port, readOnly }: IField) => {
-  const onChange =
-    (index: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
-      const newArr = [...port.value];
-      newArr[index] = e.target.value;
-
-      (port as Input).setValue(newArr);
-    };
-
-  return (
-    <Stack gap={4} align="center">
-      <Label>X</Label>
-      <TextInput
-        disabled={readOnly}
-        width={'100%'}
-        value={port.value[0]}
-        onChange={onChange(0)}
-      />
-      <Label>Y</Label>
-      <TextInput
-        disabled={readOnly}
-        width={'100%'}
-        value={port.value[1]}
-        onChange={onChange(1)}
-      />
-      <Label>Z</Label>
-      <TextInput
-        disabled={readOnly}
-        width={'100%'}
-        value={port.value[2]}
-        onChange={onChange(2)}
-      />
-    </Stack>
-  );
-});
diff --git a/packages/graph-editor/src/components/flow/handles.tsx b/packages/graph-editor/src/components/flow/handles.tsx
index 7d01d8ddf..0efc360f3 100644
--- a/packages/graph-editor/src/components/flow/handles.tsx
+++ b/packages/graph-editor/src/components/flow/handles.tsx
@@ -84,7 +84,7 @@ export const Handle = (props: HandleProps) => {
     shouldHideHandles = false,
     error,
     backgroundColor,
-    isArray,
+    variant,
     type: dataType,
     variadic,
     isAnchor,
diff --git a/packages/graph-editor/src/components/flow/wrapper/nodeV2.tsx b/packages/graph-editor/src/components/flow/wrapper/nodeV2.tsx
index 0d7934c13..84fc6b9e1 100644
--- a/packages/graph-editor/src/components/flow/wrapper/nodeV2.tsx
+++ b/packages/graph-editor/src/components/flow/wrapper/nodeV2.tsx
@@ -2,10 +2,13 @@ import { BaseNodeWrapper } from './base.js';
 
 import {
   COLOR,
+  CONTROL_PORT,
   Color,
+  ControlFlowPort,
+  DataFlowPort,
+  DataflowNode,
   Input,
   OBJECT,
-  Port,
   SchemaObject,
   annotatedDynamicInputs,
   annotatedNodeRunning,
@@ -14,7 +17,6 @@ import {
 } from '@tokens-studio/graph-engine';
 import { ErrorBoundary } from 'react-error-boundary';
 import { ErrorBoundaryContent } from '@/components/ErrorBoundaryContent.js';
-import { Node as GraphNode } from '@tokens-studio/graph-engine';
 import { Handle, HandleContainer, useHandle } from '../handles.js';
 import { Stack, Text } from '@tokens-studio/ui';
 import { SystemSettings } from '@/system/frame/settings.js';
@@ -51,7 +53,7 @@ export type WrappedNodeDefinition = {
 export const NodeV2 = (args) => {
   const { id } = args;
   const graph = useLocalGraph();
-  const node = graph.getNode(id);
+  const node = graph.getNode(id) as DataflowNode;
   const frame = useFrame();
 
   if (!node) {
@@ -76,7 +78,7 @@ export interface INodeWrap {
   title?: string;
   subtitle?: string;
   icon?: React.ReactNode;
-  node: GraphNode;
+  node: DataflowNode;
   settings: SystemSettings;
 }
 
@@ -127,7 +129,7 @@ const NodeWrap = observer(({ settings, node, icon }: INodeWrap) => {
         (node.annotations[title] as string) || node.factory.title || 'Node'
       }
       subtitle={node.annotations[title] ? node.factory.title : ''}
-      error={node.error || null}
+      error={node.dataflow?.error || null}
       controls={''}
       style={{ minWidth: '200px' }}
     >
@@ -138,11 +140,11 @@ const NodeWrap = observer(({ settings, node, icon }: INodeWrap) => {
           style={{ padding: 'var(--component-spacing-md) 0' }}
         >
           <HandleContainer type="source" className={'source'} full>
-            <PortArray ports={node.outputs} />
+            <PortArray ports={node.outputs as Record<string, DataFlowPort>} />
             {isInput && <DynamicOutput />}
           </HandleContainer>
           <HandleContainer type="target" className={'target'} full>
-            <PortArray ports={node.inputs} />
+            <PortArray ports={node.inputs as Record<string, DataFlowPort>} />
           </HandleContainer>
         </Stack>
         <SpecificWrapper specifics={frame.specifics} node={node} />
@@ -150,7 +152,7 @@ const NodeWrap = observer(({ settings, node, icon }: INodeWrap) => {
       {settings.showTimings && (
         <div className={styles.timingText}>
           <Text size="xsmall" muted>
-            {node.lastExecutedDuration}ms
+            {node.dataflow?.lastExecutedDuration}ms
           </Text>
         </div>
       )}
@@ -159,7 +161,7 @@ const NodeWrap = observer(({ settings, node, icon }: INodeWrap) => {
 });
 
 export interface IPortArray {
-  ports: Record<string, Port>;
+  ports: Record<string, DataFlowPort>;
   hideNames?: boolean;
 }
 export const PortArray = observer(({ ports, hideNames }: IPortArray) => {
@@ -196,7 +198,7 @@ export const DynamicOutput = () => {
 };
 
 export const extractTypeIcon = (
-  port: Port,
+  port: DataFlowPort | ControlFlowPort,
   iconLookup: Record<string, React.ReactNode>,
 ) => {
   let id = port.type.$id || '';
@@ -235,7 +237,7 @@ export const extractType = (schema: SchemaObject) => {
   return schema.type;
 };
 
-export const InlineTypeLabel = ({ port }: { port: Port }) => {
+export const InlineTypeLabel = ({ port }: { port: DataFlowPort }) => {
   //Try lookup the id if possible
   const typeName = extractType(port.type);
   const handleInformation = useHandle();
@@ -355,6 +357,8 @@ const InputHandle = observer(
     const type = extractType(port.type);
     const handleInformation = useHandle();
 
+    const variant = typeCol.isArray ? 'array' : (port.pType == CONTROL_PORT?'message':undefined);
+
     if (input.variadic) {
       return (
         <>
@@ -363,6 +367,7 @@ const InputHandle = observer(
             type={type}
             visible={port.visible != false || port.isConnected}
             id={port.name}
+            variant={variant}
             variadic
           >
             {!hideName && <Text>{port.name} + </Text>}
@@ -373,7 +378,7 @@ const InputHandle = observer(
               <Handle
                 {...typeCol}
                 //The underlying type might not be an array
-                isArray={port.type.type?.type === 'array'}
+                variant={port.type.type?.type === 'array'?'array':undefined}
                 visible={port.visible != false || port.isConnected}
                 id={port.name + `[${edge.annotations['engine.index']}]`}
                 key={i}
@@ -410,6 +415,7 @@ const InputHandle = observer(
     return (
       <Handle
         {...typeCol}
+        variant={variant}
         visible={port.visible != false || port.isConnected}
         id={port.name}
         type={type}
diff --git a/packages/graph-editor/src/components/hotKeys/index.tsx b/packages/graph-editor/src/components/hotKeys/index.tsx
index 882c32ccb..e924e1f8c 100644
--- a/packages/graph-editor/src/components/hotKeys/index.tsx
+++ b/packages/graph-editor/src/components/hotKeys/index.tsx
@@ -66,6 +66,41 @@ export const keyMap = {
   RECALL_VIEWPORT: ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
 };
 
+export const keyMapDescriptions = {
+  AUTO_LAYOUT: 'Auto Layout',
+  COPY: 'Copy',
+  PASTE: 'Paste',
+  DELETE: 'Delete',
+  UNDO: 'Undo',
+  REDO: 'Redo',
+  SELECT_ALL: 'Select All',
+  DUPLICATE: 'Duplicate',
+  GROUP: 'Group',
+  UNGROUP: 'Ungroup',
+  SAVE: 'Save',
+  LOAD: 'Load',
+  FIND: 'Find',
+  RESET: 'Reset',
+  ZOOM_IN: 'Zoom In',
+  ZOOM_OUT: 'Zoom Out',
+  ZOOM_RESET: 'Zoom Reset',
+  TOGGLE_GRID: 'Toggle Grid',
+  TOGGLE_MINIMAP: 'Toggle Minimap',
+  TOGGLE_CONTROLS: 'Toggle Controls',
+  TOGGLE_SIDEBAR: 'Toggle Sidebar',
+  TOGGLE_HIDE: 'Toggle Hide',
+  TOGGLE_FULLSCREEN: 'Toggle Fullscreen',
+  TOGGLE_HELP: 'Toggle Help',
+  TOGGLE_THEME: 'Toggle Theme',
+  TOGGLE_SNAP_GRID: 'Toggle Snap Grid',
+  TOGGLE_NODES_PANEL: 'Toggle Nodes Panel',
+  TOGGLE_TYPES: 'Toggle Types',
+  TOGGLE_VALUES: 'Toggle Values',
+  SAVE_VIEWPORT: 'Save Viewport',
+  RECALL_VIEWPORT: 'Recall Viewport',
+};
+
+
 export const getViewports = (graph) => {
   const viewports =
     graph.annotations[savedViewports] || new Array(9).fill(null);
diff --git a/packages/graph-editor/src/components/menubar/defaults.tsx b/packages/graph-editor/src/components/menubar/defaults.tsx
index 1d54ed83f..ee3f9b04e 100644
--- a/packages/graph-editor/src/components/menubar/defaults.tsx
+++ b/packages/graph-editor/src/components/menubar/defaults.tsx
@@ -3,13 +3,11 @@ import { DebugPanel } from '../panels/debugger/index.js';
 import { DropPanel } from '../panels/dropPanel/index.js';
 import { GraphPanel } from '../panels/graph/index.js';
 import { ImperativeEditorRef } from '@/editor/editorTypes.js';
-import { Inputsheet } from '../panels/inputs/index.js';
 import { Legend } from '../panels/legend/index.js';
 import { LogsPanel } from '../panels/logs/index.js';
 import { Menu, MenuItem, Seperator, SubMenu } from './data.js';
 import { MenuItemElement } from './menuItem.js';
 import { NodeSettingsPanel } from '../panels/nodeSettings/index.js';
-import { OutputSheet } from '../panels/output/index.js';
 import { PlayPanel } from '../panels/play/index.js';
 import { Settings } from '../panels/settings/index.js';
 import { TabData } from 'rc-dock';
@@ -223,18 +221,6 @@ export const defaultMenuDataFactory = (): Menu =>
         name: 'window',
         title: 'Window',
         items: [
-          windowButton({
-            name: 'inputs',
-            id: 'inputs',
-            title: 'Inputs',
-            content: <Inputsheet />,
-          }),
-          windowButton({
-            name: 'outputs',
-            id: 'outputs',
-            title: 'Outputs',
-            content: <OutputSheet />,
-          }),
           windowButton({
             name: 'nodeSettings',
             id: 'nodeSettings',
diff --git a/packages/graph-editor/src/components/panels/shortcuts/index.tsx b/packages/graph-editor/src/components/panels/shortcuts/index.tsx
new file mode 100644
index 000000000..8e34ba73a
--- /dev/null
+++ b/packages/graph-editor/src/components/panels/shortcuts/index.tsx
@@ -0,0 +1,66 @@
+import { Box, Heading, Stack, Text } from '@tokens-studio/ui';
+import { keyMap, keyMapDescriptions } from '../../hotKeys/index.js'
+import { styled } from '@/lib/stitches/index.js';
+import { useMemo } from 'react';
+import React from 'react'
+
+
+const Code = styled('code', {
+    color: '$fgSubtle',
+    padding: '$1',
+    border: '1px solid $borderSubtle',
+});
+
+export const ShortcutsPanel = () => {
+
+    const entries = useMemo(() => {
+        return Object.entries(keyMap).map(([id, triggers]) => {
+
+            //Get the description
+            const description = keyMapDescriptions[id];
+            //Get the first trigger
+            const trigger = Array.isArray(triggers) ? triggers[0] : triggers;
+
+            //Now split the trigger
+            const pieces = trigger.split('+');
+
+            return (
+                <Stack gap={2}>
+                    <Stack css={{ flex: 1 }} gap={1} justify='end'>
+                        {/* Place a + between the values */}
+                        {pieces.map((piece, index) => (
+                            <React.Fragment key={index}>
+                                {index > 0 && <Text> + </Text>}
+                                <Code>{piece}</Code>
+                            </React.Fragment>
+                        ))}
+                    </Stack>
+                    <Text css={{ flex: 1 }} >{description}</Text>
+                </Stack>
+            );
+        });
+    }, []);
+
+
+    return (
+        <Box
+            css={{
+                height: '100%',
+                width: '100%',
+                padding: '$4',
+                paddingTop: '$5',
+                boxSizing: 'border-box',
+                flex: 1,
+                display: 'flex',
+                overflow: 'auto',
+                flexDirection: 'column',
+            }}
+        >
+            <Heading size='large'>Keyboard Shortcuts</Heading>
+            <br />
+            <Stack direction="column" gap={4} width="full">
+                {entries}
+            </Stack>
+        </Box>
+    );
+}
\ No newline at end of file
diff --git a/packages/graph-editor/src/components/portPanel/index.tsx b/packages/graph-editor/src/components/portPanel/index.tsx
index aa5b78ee9..ed97e819e 100644
--- a/packages/graph-editor/src/components/portPanel/index.tsx
+++ b/packages/graph-editor/src/components/portPanel/index.tsx
@@ -1,3 +1,4 @@
+import { DATAFLOW_PORT, DataFlowPort, Port } from '@tokens-studio/graph-engine';
 import {
   DropdownMenu,
   IconButton,
@@ -5,7 +6,6 @@ import {
   Stack,
   Tooltip,
 } from '@tokens-studio/ui';
-import { Port as GraphPort } from '@tokens-studio/graph-engine';
 import { IField } from '@/components/controls/interface.js';
 import { InlineTypeLabel } from '@/components/flow/index.js';
 import { Input } from '@tokens-studio/graph-engine';
@@ -24,7 +24,7 @@ import Xmark from '@tokens-studio/icons/Xmark.js';
 import copy from 'copy-to-clipboard';
 
 export interface IPortPanel {
-  ports: Record<string, GraphPort>;
+  ports: Record<string, Port>;
   readOnly?: boolean;
 }
 
@@ -37,11 +37,11 @@ export const PortPanel = observer(({ ports, readOnly }: IPortPanel) => {
   const entries = Object.values(ports).sort();
 
   return (
-    <Stack direction="column" gap={3} width="full">
+    <Stack direction="column" gap={2} width="full">
       {entries
         .filter((x) => !x.annotations[hidden])
         .map((x) => (
-          <Port port={x} key={x.name} readOnly={readOnly} />
+          <PortEl port={x} key={x.name} readOnly={readOnly} />
         ))}
     </Stack>
   );
@@ -51,20 +51,26 @@ export const Port = observer(({ port, readOnly: isReadOnly }: IPort) => {
   const readOnly = isReadOnly || port.isConnected;
   const frame = useFrame();
   const graph = useGraph();
+  const dataflowPort = port as DataFlowPort;
   const isInput = 'studio.tokens.generic.input' === port.node.factory.type;
   const isDynamicInput = Boolean(port.annotations[deletable]);
   const resettable = Boolean(port.annotations[resetable]);
 
   const inner = useMemo(() => {
-    const field = frame.controls.find((x) => x.matcher(port, { readOnly }));
+
+    if (port.pType !== DATAFLOW_PORT) {
+      return <></>
+    }
+
+    const field = controlSelector.find((x) => x.matcher(port, { readOnly }));
     const Component = field?.component as React.FC<IField>;
 
     return (
-      <Component port={port} readOnly={readOnly} settings={frame.settings} />
+      <Component port={port as DataFlowPort} readOnly={readOnly} settings={frame.settings} />
     );
     //We use an explicit dependency on the type
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [frame.controls, port, readOnly, port.type]);
+  }, [controlSelector, port, readOnly, (port as DataFlowPort).type!]);
 
   const onClick = useCallback(() => {
     port.setVisible(!port.visible);
@@ -90,23 +96,23 @@ export const Port = observer(({ port, readOnly: isReadOnly }: IPort) => {
   }, [port]);
 
   const onCopySchema = useCallback(() => {
-    const type = port.type;
+    const type = dataflowPort.type;
 
     copy(JSON.stringify(type, null, 4), {
       debug: true,
     });
-  }, [port]);
+  }, [dataflowPort.type]);
 
   const onCopyValue = useCallback(() => {
-    const value = port.value;
+    const value = dataflowPort.value;
 
     copy(JSON.stringify(value, null, 4), {
       debug: true,
     });
-  }, [port]);
+  }, [dataflowPort.value]);
 
   return (
-    <Stack direction="column" gap={3}>
+    <Stack direction="column" gap={3} >
       <Stack direction="row" gap={2} align="center" justify="between">
         <Stack direction="row" gap={2} align="center">
           {!isInput && (
@@ -117,12 +123,12 @@ export const Port = observer(({ port, readOnly: isReadOnly }: IPort) => {
               icon={port.visible ? <Eye /> : <EyeClosed />}
             />
           )}
-          <Tooltip label={port.type.description || ''}>
+          <Tooltip label={dataflowPort.type.description || ''}>
             <Label bold>{port.name}</Label>
           </Tooltip>
         </Stack>
         <Stack gap={2} align="center">
-          <InlineTypeLabel port={port} />
+          <InlineTypeLabel port={dataflowPort} />
           <DropdownMenu>
             <DropdownMenu.Trigger asChild>
               <IconButton
diff --git a/packages/graph-editor/src/components/toolbar/dropdowns/layout.tsx b/packages/graph-editor/src/components/toolbar/dropdowns/layout.tsx
index 4a51af251..7e178847e 100644
--- a/packages/graph-editor/src/components/toolbar/dropdowns/layout.tsx
+++ b/packages/graph-editor/src/components/toolbar/dropdowns/layout.tsx
@@ -53,11 +53,8 @@ export const LayoutDropdown = () => {
       </Tooltip>
       <DropdownMenu.Portal>
         <DropdownMenu.Content style={{ minWidth: '200px' }}>
-          <DropdownMenu.Item onSelect={() => onClick('inputs')}>
-            Input
-          </DropdownMenu.Item>
-          <DropdownMenu.Item onSelect={() => onClick('outputs')}>
-            Output
+          <DropdownMenu.Item onSelect={() => onClick('nodeSheet')}>
+            Node Sheet
           </DropdownMenu.Item>
           <DropdownMenu.Item onSelect={() => onClick('nodeSettings')}>
             Node Settings
@@ -77,7 +74,9 @@ export const LayoutDropdown = () => {
           <DropdownMenu.Item onSelect={() => onClick('dropPanel')}>
             Nodes
           </DropdownMenu.Item>
-
+          <DropdownMenu.Item onSelect={() => onClick('keyboardShortcuts')}>
+            Keyboard Shortcuts
+          </DropdownMenu.Item>
           <DropdownMenu.Separator />
           <DropdownMenu.Item onSelect={saveLayout}>
             Save Layout
diff --git a/packages/graph-editor/src/components/toolbar/layoutButtons.tsx b/packages/graph-editor/src/components/toolbar/layoutButtons.tsx
index 8a7ff794d..e39e42144 100644
--- a/packages/graph-editor/src/components/toolbar/layoutButtons.tsx
+++ b/packages/graph-editor/src/components/toolbar/layoutButtons.tsx
@@ -1,12 +1,13 @@
 import { DebugPanel } from '../panels/debugger/index.js';
 import { DropPanel } from '../panels/dropPanel/index.js';
 import { GraphPanel } from '../panels/graph/index.js';
-import { Inputsheet } from '../panels/inputs/index.js';
+
 import { Legend } from '../panels/legend/index.js';
 import { LogsPanel } from '../panels/logs/index.js';
 import { NodeSettingsPanel } from '../panels/nodeSettings/index.js';
-import { OutputSheet } from '../panels/output/index.js';
 import { Settings } from '../panels/settings/index.js';
+import { ShortcutsPanel } from '../panels/shortcuts/index.js';
+import { UnifiedSheet } from '../panels/unified/index.js';
 import React from 'react';
 
 export const layoutButtons = {
@@ -15,21 +16,21 @@ export const layoutButtons = {
     title: 'Settings',
     content: <Settings />,
   },
-  inputs: {
-    id: 'inputs',
-    title: 'Inputs',
-    content: <Inputsheet />,
-  },
-  outputs: {
-    id: 'outputs',
-    title: 'Outputs',
-    content: <OutputSheet />,
+  nodeSheet: {
+    id: 'nodeSheet',
+    title: 'Node',
+    content: <UnifiedSheet />,
   },
   nodeSettings: {
     id: 'nodeSettings',
     title: 'Node Settings',
     content: <NodeSettingsPanel />,
   },
+  keyboardShortcuts: {
+    id: 'keyboardShortcuts',
+    title: 'Keyboard Shortcuts',
+    content: <ShortcutsPanel />,
+  },
   graphSettings: {
     id: 'graphSettings',
     title: 'Graph Settings',
diff --git a/packages/graph-editor/src/context/graph.tsx b/packages/graph-editor/src/context/graph.tsx
index 767a26081..323223ec1 100644
--- a/packages/graph-editor/src/context/graph.tsx
+++ b/packages/graph-editor/src/context/graph.tsx
@@ -1,19 +1,20 @@
+import { FullyFeaturedGraph } from '@/types/index.js';
 import { Graph } from '@tokens-studio/graph-engine';
 import React, { createContext, useContext, useMemo } from 'react';
 
 type GraphContextType = {
-  graph: Graph;
+  graph: FullyFeaturedGraph;
 };
 
 const GraphContext = createContext<GraphContextType>({
-  graph: new Graph(),
+  graph: new Graph() as unknown as FullyFeaturedGraph,
 });
 
 function GraphContextProvider({
   graph,
   children,
 }: {
-  graph: Graph;
+    graph: FullyFeaturedGraph;
   children: React.ReactNode;
 }) {
   const providerValue = useMemo(() => ({ graph }), [graph]);
@@ -25,7 +26,7 @@ function GraphContextProvider({
   );
 }
 
-function useLocalGraph(): Graph {
+function useLocalGraph(): FullyFeaturedGraph {
   return useContext(GraphContext).graph;
 }
 
diff --git a/packages/graph-editor/src/editor/actions/connect.ts b/packages/graph-editor/src/editor/actions/connect.ts
index 73c374154..bbce98365 100644
--- a/packages/graph-editor/src/editor/actions/connect.ts
+++ b/packages/graph-editor/src/editor/actions/connect.ts
@@ -1,6 +1,6 @@
 import { Connection, Edge } from 'reactflow';
 import { Dispatch } from '@/redux/store.js';
-import { Graph } from '@tokens-studio/graph-engine';
+import { FullyFeaturedGraph } from '@/types/index.js';
 import { deletable } from '@/annotations/index.js';
 import { getVariadicIndex, stripVariadic } from '@/utils/stripVariadic.js';
 
@@ -10,112 +10,112 @@ export const connectNodes =
     setEdges,
     dispatch,
   }: {
-    graph: Graph;
+    graph: FullyFeaturedGraph;
     setEdges: React.Dispatch<React.SetStateAction<Edge[]>>;
     dispatch: Dispatch;
   }) =>
-  (params: Connection) => {
-    //Create the connection in the underlying graph
+    (params: Connection) => {
+      //Create the connection in the underlying graph
 
-    let parameters = params;
-    const sourceNode = graph.getNode(params.source!);
-    const targetNode = graph.getNode(params.target!);
+      let parameters = params;
+      const sourceNode = graph.getNode(params.source!);
+      const targetNode = graph.getNode(params.target!);
 
-    const variadicIndex = getVariadicIndex(params.targetHandle!);
+      const variadicIndex = getVariadicIndex(params.targetHandle!);
 
-    if (!sourceNode || !targetNode) {
-      throw new Error('Could not find node');
-    }
+      if (!sourceNode || !targetNode) {
+        throw new Error('Could not find node');
+      }
 
-    const strippedTargetHandle = stripVariadic(params.targetHandle!);
-    let sourcePort = sourceNode.outputs[stripVariadic(params.sourceHandle!)];
-    const targetPort = targetNode.inputs[strippedTargetHandle];
+      const strippedTargetHandle = stripVariadic(params.targetHandle!);
+      let sourcePort = sourceNode.outputs[stripVariadic(params.sourceHandle!)];
+      const targetPort = targetNode.inputs[strippedTargetHandle];
 
-    if (params.sourceHandle === '[dynamic]') {
-      let candidateName = strippedTargetHandle;
-      let counter = 0;
+      if (params.sourceHandle === '[dynamic]') {
+        let candidateName = strippedTargetHandle;
+        let counter = 0;
 
-      while (sourceNode.inputs[candidateName]) {
-        candidateName = strippedTargetHandle + counter++;
-      }
+        while (sourceNode.inputs[candidateName]) {
+          candidateName = strippedTargetHandle + counter++;
+        }
 
-      //The user is trying to create a dynamic input
-      sourceNode.addInput(candidateName, {
-        type: targetPort.type,
-        visible: false,
-        annotations: {
-          [deletable]: true,
-        },
-      });
-      sourceNode.inputs[candidateName].setValue(targetPort.value);
-      //Change the handle to the newly created handle
-      sourcePort = sourceNode.outputs[candidateName];
-      params.sourceHandle = candidateName;
-    }
+        //The user is trying to create a dynamic input
+        sourceNode.addInput(candidateName, {
+          type: targetPort.type,
+          visible: false,
+          annotations: {
+            [deletable]: true,
+          },
+        });
+        sourceNode.inputs[candidateName].setValue(targetPort.value);
+        //Change the handle to the newly created handle
+        sourcePort = sourceNode.outputs[candidateName];
+        params.sourceHandle = candidateName;
+      }
 
-    //If the source port is variadic, check to see if there is already a connection
-    else if (targetPort.variadic) {
-      const alreadyConnected = targetPort._edges.some((edge) => {
-        const index = edge.annotations['engine.index'] as number;
-        return index === variadicIndex;
-      });
-      //Don't attempt to overwrite an existing index
-      if (alreadyConnected) {
-        return;
+      //If the source port is variadic, check to see if there is already a connection
+      else if (targetPort.variadic) {
+        const alreadyConnected = targetPort._edges.some((edge) => {
+          const index = edge.annotations['engine.index'] as number;
+          return index === variadicIndex;
+        });
+        //Don't attempt to overwrite an existing index
+        if (alreadyConnected) {
+          return;
+        }
+      }
+      //Check to see if there is already a connection
+      else if (targetPort.isConnected) {
+        //We need to disconnect the existing connection
+        graph.removeEdge(targetPort._edges[0].id);
       }
-    }
-    //Check to see if there is already a connection
-    else if (targetPort.isConnected) {
-      //We need to disconnect the existing connection
-      graph.removeEdge(targetPort._edges[0].id);
-    }
 
-    const newGraphEdge = graph.connect(
-      sourceNode,
-      sourcePort,
-      targetNode,
-      targetPort,
-    );
+      const newGraphEdge = graph.connect(
+        sourceNode,
+        sourcePort,
+        targetNode,
+        targetPort,
+      );
+
+      //If the target port is variadic, we need to add the index to the edge data
+      if (targetPort.variadic) {
+        const index = newGraphEdge.annotations['engine.index'] as number;
 
-    //If the target port is variadic, we need to add the index to the edge data
-    if (targetPort.variadic) {
-      const index = newGraphEdge.annotations['engine.index'] as number;
+        parameters = {
+          ...parameters,
+          targetHandle: params.targetHandle + `[${index}]`,
+        };
+      }
 
-      parameters = {
+      const newEdge = {
         ...parameters,
-        targetHandle: params.targetHandle + `[${index}]`,
+        id: newGraphEdge.id,
+        type: 'custom',
       };
-    }
-
-    const newEdge = {
-      ...parameters,
-      id: newGraphEdge.id,
-      type: 'custom',
-    };
 
-    dispatch.graph.appendLog({
-      time: new Date(),
-      type: 'info',
-      data: {
-        msg: `Edge #${newGraphEdge.id} created`,
-      },
-    });
+      dispatch.graph.appendLog({
+        time: new Date(),
+        type: 'info',
+        data: {
+          msg: `Edge #${newGraphEdge.id} created`,
+        },
+      });
 
-    return setEdges((eds) => {
-      const newEdgs = eds.reduce(
-        (acc, edge) => {
-          //All our inputs take a single input only, disconnect if we have a connection already
-          if (
-            edge.targetHandle == params.targetHandle &&
-            edge.target === params.target
-          ) {
+      return setEdges((eds) => {
+        const newEdgs = eds.reduce(
+          (acc, edge) => {
+            //All our inputs take a single input only, disconnect if we have a connection already
+            if (
+              edge.targetHandle == params.targetHandle &&
+              edge.target === params.target
+            ) {
+              return acc;
+            }
+            acc.push(edge);
             return acc;
-          }
-          acc.push(edge);
-          return acc;
-        },
-        [newEdge] as Edge[],
-      );
-      return newEdgs;
-    });
-  };
+          },
+          [newEdge] as Edge[],
+        );
+        return newEdgs;
+      });
+    };
diff --git a/packages/graph-editor/src/editor/actions/copyNodes.tsx b/packages/graph-editor/src/editor/actions/copyNodes.tsx
index bd0a04ea4..8c0032b1f 100644
--- a/packages/graph-editor/src/editor/actions/copyNodes.tsx
+++ b/packages/graph-editor/src/editor/actions/copyNodes.tsx
@@ -1,6 +1,6 @@
 import { Node, ReactFlowInstance } from 'reactflow';
 import { SerializedNode } from '@/types/serializedNode.js';
-import { v4 as uuidv4 } from 'uuid';
+import { nanoid as uuid } from 'nanoid'
 
 export const copyNodeAction = (
   reactFlowInstance: ReactFlowInstance,
@@ -11,7 +11,7 @@ export const copyNodeAction = (
     const { addNodes } = await nodes.reduce(
       async (acc, node) => {
         const resolvedAcc = await acc;
-        const newID = uuidv4();
+        const newID = uuid();
         if (node.engine) {
           const graphNode = graph.getNode(node.engine.id);
           const newGraphNode = await graphNode?.factory.deserialize(
diff --git a/packages/graph-editor/src/editor/actions/createNode.tsx b/packages/graph-editor/src/editor/actions/createNode.tsx
index 1ab5cb285..c55e04e95 100644
--- a/packages/graph-editor/src/editor/actions/createNode.tsx
+++ b/packages/graph-editor/src/editor/actions/createNode.tsx
@@ -1,6 +1,8 @@
 import { Dispatch } from '@/redux/store.js';
-import { Graph, Node, NodeLoader } from '@tokens-studio/graph-engine';
+import { FullyFeaturedGraph } from '@/types/index.js';
+import { Graph, Input, Node, NodeLoader } from '@tokens-studio/graph-engine';
 import { ReactFlowInstance, Node as ReactFlowNode } from 'reactflow';
+import { xpos, ypos } from '@/annotations/index.js';
 
 export type NodeRequest = {
   type: string;
@@ -10,7 +12,7 @@ export type NodeRequest = {
 
 export interface ICreateNode {
   reactFlowInstance: ReactFlowInstance;
-  graph: Graph;
+  graph: FullyFeaturedGraph;
   nodeLoader: NodeLoader;
   iconLookup: Record<string, string>;
   /**
@@ -63,15 +65,15 @@ export const createNode = ({
 
     //Generate the new node
     const node = await new Factory({
-      graph: graph,
+      graph: graph as unknown as Graph,
     });
 
     graph.addNode(node);
 
     const finalPos = position || { x: 0, y: 0 };
 
-    node.annotations['xpos'] = finalPos.x;
-    node.annotations['ypos'] = finalPos.y;
+    node.setAnnotation(xpos, finalPos.x);
+    node.setAnnotation(ypos, finalPos.y);
 
     if (customUI[nodeRequest.type]) {
       node.annotations['uiNodeType'] = customUI[nodeRequest.type];
@@ -84,11 +86,11 @@ export const createNode = ({
       if (!input) {
         return;
       }
-      node.inputs[name].setValue(value);
+      (node.inputs[name] as Input).setValue(value);
     });
 
     //Update immediately
-    graph.update(node.id);
+    graph.capabilities.dataFlow?.update(node.id);
 
     //Add the node to the react flow instance
     const reactFlowNode = {
diff --git a/packages/graph-editor/src/editor/actions/deleteNode.tsx b/packages/graph-editor/src/editor/actions/deleteNode.tsx
index 4b4e7b582..55581e79a 100644
--- a/packages/graph-editor/src/editor/actions/deleteNode.tsx
+++ b/packages/graph-editor/src/editor/actions/deleteNode.tsx
@@ -1,9 +1,9 @@
 import { Dispatch } from '@/redux/store.js';
-import { Graph } from '@tokens-studio/graph-engine';
+import { FullyFeaturedGraph } from '@/types/index.js';
 import { ReactFlowInstance } from 'reactflow';
 
 export const deleteNode = (
-  graph: Graph,
+  graph: FullyFeaturedGraph,
   dispatch: Dispatch,
   reactFlowInstance: ReactFlowInstance,
 ) => {
diff --git a/packages/graph-editor/src/editor/actions/duplicate.ts b/packages/graph-editor/src/editor/actions/duplicate.ts
index a1a4669d3..52ebc5672 100644
--- a/packages/graph-editor/src/editor/actions/duplicate.ts
+++ b/packages/graph-editor/src/editor/actions/duplicate.ts
@@ -1,10 +1,17 @@
 import { Edge, Node, ReactFlowInstance } from 'reactflow';
-import { Graph, Port, annotatedSingleton } from '@tokens-studio/graph-engine';
-import { v4 as uuidv4 } from 'uuid';
+import { FullyFeaturedGraph } from '@/types/index.js';
+import {
+
+  NodeFactory,
+  Port,
+  annotatedSingleton,
+} from '@tokens-studio/graph-engine';
+import { nanoid as uuid } from 'nanoid'
+import { xpos, ypos } from '@/annotations/index.js';
 
 export interface IDuplicate {
   reactFlowInstance: ReactFlowInstance;
-  graph: Graph;
+  graph: FullyFeaturedGraph;
 }
 
 /**
@@ -13,82 +20,82 @@ export interface IDuplicate {
  */
 export const duplicateNodes =
   ({ graph, reactFlowInstance }: IDuplicate) =>
-  (nodeIds: string[]) => {
-    const { addNodes, addEdges } = nodeIds.reduce(
-      (acc, nodeId) => {
-        const node = reactFlowInstance.getNode(nodeId);
-        //Ignore missing lookups
-        if (!node) {
-          return acc;
-        }
-
-        const graphNode = graph.getNode(nodeId);
-
-        //Ignore missing nodes or attempts to duplicate singletons
-        if (!graphNode || graphNode?.annotations[annotatedSingleton]) {
-          return acc;
-        }
-
-        const clonedNode = graphNode.clone(graph);
-
-        const newPosition = {
-          x: node.position.x + 20,
-          y: node.position.y + 100,
-        };
-
-        clonedNode.annotations['ui.position.x'] = newPosition.x;
-        clonedNode.annotations['ui.position.y'] = newPosition.y;
-
-        graph.addNode(clonedNode);
-
-        const newEdges = Object.entries(graphNode.inputs)
-          .map(([key, value]) => {
-            // value._edges.
-            return (value as Port)._edges.map((edge) => {
-              const newEdgeId = uuidv4();
-
-              const vals = {
-                id: newEdgeId,
-                target: clonedNode.id,
-                targetHandle: key,
-                source: edge.source,
-                sourceHandle: edge.sourceHandle,
-              };
-
-              graph.createEdge(vals);
-              return vals;
-            });
-          })
-          .flat();
-
-        //De select the existing node so that we can select the new one
-        node.selected = false;
-
-        const newNodes = [
-          {
-            ...node,
-            id: clonedNode.id,
-            selected: true,
-            position: newPosition,
-          },
-        ];
-
-        return {
-          addNodes: acc.addNodes.concat(newNodes),
-          addEdges: acc.addEdges.concat(newEdges),
-        };
-      },
-      {
-        addNodes: [] as Node[],
-        addEdges: [] as Edge[],
-      },
-    );
-
-    //We need to set the nodes and edges otherwise reactflow will not respect the change to the selected value we used
-    reactFlowInstance.setNodes((existingNodes) => {
-      return existingNodes.concat(addNodes);
-    });
-    reactFlowInstance.setEdges((existingEdges) => {
-      return existingEdges.concat(addEdges);
-    });
-  };
+    (nodeIds: string[]) => {
+      const { addNodes, addEdges } = nodeIds.reduce(
+        (acc, nodeId) => {
+          const node = reactFlowInstance.getNode(nodeId);
+          //Ignore missing lookups
+          if (!node) {
+            return acc;
+          }
+
+          const graphNode = graph.getNode(nodeId);
+
+          //Ignore missing nodes or attempts to duplicate singletons
+          if (!graphNode || graphNode?.annotations[annotatedSingleton]) {
+            return acc;
+          }
+
+          const clonedNode = graphNode.clone(graph);
+
+          const newPosition = {
+            x: node.position.x + 20,
+            y: node.position.y + 100,
+          };
+
+          clonedNode.setAnnotation(xpos, newPosition.x);
+          clonedNode.setAnnotation(ypos, newPosition.y);
+
+          graph.addNode(clonedNode);
+
+          const newEdges = Object.entries(graphNode.inputs)
+            .map(([key, value]) => {
+              // value._edges.
+              return (value as Port)._edges.map((edge) => {
+                const newEdgeId = uuid();
+
+                const vals = {
+                  id: newEdgeId,
+                  target: clonedNode.id,
+                  targetHandle: key,
+                  source: edge.source,
+                  sourceHandle: edge.sourceHandle,
+                };
+
+                graph.createEdge(vals);
+                return vals;
+              });
+            })
+            .flat();
+
+          //De select the existing node so that we can select the new one
+          node.selected = false;
+
+          const newNodes = [
+            {
+              ...node,
+              id: clonedNode.id,
+              selected: true,
+              position: newPosition,
+            },
+          ];
+
+          return {
+            addNodes: acc.addNodes.concat(newNodes),
+            addEdges: acc.addEdges.concat(newEdges),
+          };
+        },
+        {
+          addNodes: [] as Node[],
+          addEdges: [] as Edge[],
+        },
+      );
+
+      //We need to set the nodes and edges otherwise reactflow will not respect the change to the selected value we used
+      reactFlowInstance.setNodes((existingNodes) => {
+        return existingNodes.concat(addNodes);
+      });
+      reactFlowInstance.setEdges((existingEdges) => {
+        return existingEdges.concat(addEdges);
+      });
+    };
diff --git a/packages/graph-editor/src/editor/actions/provider.tsx b/packages/graph-editor/src/editor/actions/provider.tsx
index d145bf9d4..311ba5a04 100644
--- a/packages/graph-editor/src/editor/actions/provider.tsx
+++ b/packages/graph-editor/src/editor/actions/provider.tsx
@@ -36,6 +36,6 @@ export const ActionProvider = ({ children, actions }: ActionProviderProps) => {
 export const useAction = <T extends keyof Actions>(
   actionName: T,
 ): Actions[T] => {
-  const actions = React.useContext<Actions>(ContextProvider);
+  const actions = React.useContext(ContextProvider) as Actions;
   return actions[actionName];
 };
diff --git a/packages/graph-editor/src/editor/editorTypes.ts b/packages/graph-editor/src/editor/editorTypes.ts
index 7b410ab99..b9fa23aa0 100644
--- a/packages/graph-editor/src/editor/editorTypes.ts
+++ b/packages/graph-editor/src/editor/editorTypes.ts
@@ -1,11 +1,13 @@
 import {
-  Graph,
+  CapabilityFactory,
   Node as GraphNode,
   SchemaObject,
   SerializedGraph,
 } from '@tokens-studio/graph-engine';
 
 import { Edge, Node, ReactFlowInstance } from 'reactflow';
+import { FullyFeaturedGraph } from '@/types/index.js';
+import { LayoutBase } from 'rc-dock';
 import { Menu } from '@/components/menubar/data.js';
 import { System } from '@/system/index.js';
 import type { LayoutBase } from 'rc-dock';
@@ -81,10 +83,10 @@ export type ImperativeEditorRef = {
    */
   clear: () => void;
   save: () => SerializedGraph;
-  load: (state: Graph) => void;
+  load: (state: FullyFeaturedGraph) => void;
   loadRaw: (state: SerializedGraph) => void;
   getFlow: () => ReactFlowInstance;
-  getGraph: () => Graph;
+  getGraph: () => FullyFeaturedGraph;
 };
 
 export type EditorNode = Node;
diff --git a/packages/graph-editor/src/editor/graph.tsx b/packages/graph-editor/src/editor/graph.tsx
index 50e4bbe9d..ba3c7a78d 100644
--- a/packages/graph-editor/src/editor/graph.tsx
+++ b/packages/graph-editor/src/editor/graph.tsx
@@ -24,7 +24,7 @@ import {
 } from '../components/flow/utils.js';
 import { handleDrop } from './actions/handleDrop.js';
 import { useDispatch } from '../hooks/index.js';
-import { v4 as uuidv4 } from 'uuid';
+import { nanoid as uuid } from 'nanoid'
 import CustomEdge from '../components/flow/edges/edge.js';
 import React, {
   MouseEvent,
@@ -42,9 +42,11 @@ import groupNode from '../components/flow/nodes/groupNode.js';
 import noteNode from '../components/flow/nodes/noteNode.js';
 
 import { ActionProvider } from './actions/provider.js';
-import { BatchRunError, Graph } from '@tokens-studio/graph-engine';
+import { BatchRunError, DataFlowCapabilityFactory, Graph } from '@tokens-studio/graph-engine';
 import { CommandMenu } from '@/components/commandPalette/index.js';
+import { ControlFlowCapabilityFactory } from '@tokens-studio/graph-engine';
 import { EdgeContextMenu } from '../components/contextMenus/edgeContextMenu.js';
+import { FullyFeaturedGraph } from '@/types/index.js';
 import { GraphContextProvider } from '@/context/graph.js';
 import { GraphEditorProps, ImperativeEditorRef } from './editorTypes.js';
 import { GraphToolbar } from '@/components/toolbar/index.js';
@@ -71,6 +73,10 @@ import {
   ypos,
 } from '@/annotations/index.js';
 import { duplicateNodes } from './actions/duplicate.js';
+import {
+  nodeTypesSelector,
+  panelItemsSelector,
+} from '@/redux/selectors/registry.js';
 import { useContextMenu } from 'react-contexify';
 import { useFrame } from '@/system/frame/hook.js';
 import { useSelectAddedNodes } from '@/hooks/useSelectAddedNodes.js';
@@ -145,7 +151,6 @@ export const EditorApp = React.forwardRef<
 
   //Attach sideeffect listeners
   useEffect(() => {
-    frame.capabilities.forEach((factory) => graph.registerCapability(factory));
 
     graph.onFinalize('serialize', (serialized) => {
       const nodes = reactFlowInstance.getNodes();
@@ -318,12 +323,9 @@ export const EditorApp = React.forwardRef<
             break;
           case 'position':
             if ((change as NodePositionChange).position) {
-              node.annotations['ui.position.x'] = (
-                change as NodePositionChange
-              ).position?.x;
-              node.annotations['ui.position.y'] = (
-                change as NodePositionChange
-              ).position?.y;
+              node.setAnnotation(xpos, (change as NodePositionChange).position!.x);
+              node.setAnnotation(ypos, (change as NodePositionChange).position!.y);
+
             }
             break;
         }
@@ -405,7 +407,7 @@ export const EditorApp = React.forwardRef<
           internalRef?.current.load(graph);
         }
       },
-      load: (loadedGraph: Graph) => {
+      load: (loadedGraph: FullyFeaturedGraph) => {
         //Read the annotaions
         const viewport = loadedGraph.annotations[uiViewport];
 
@@ -462,7 +464,7 @@ export const EditorApp = React.forwardRef<
         });
         //Execute the graph once to propagate values and update the UI
 
-        loadedGraph.execute().catch((e: BatchRunError) => {
+        loadedGraph.capabilities.dataFlow.execute().catch((e: BatchRunError) => {
           dispatch.graph.appendLog({
             type: 'error',
             time: new Date(),
@@ -565,7 +567,7 @@ export const EditorApp = React.forwardRef<
       const PassthroughFactory = await frame.nodeLoader(PASSTHROUGH);
 
       const newNode = new PassthroughFactory({
-        graph,
+        graph:graph as unknown as Graph
       });
 
       newNode.annotations[uiNodeType] = PASSTHROUGH;
@@ -582,14 +584,14 @@ export const EditorApp = React.forwardRef<
       graph.removeEdge(clickedEdge.id);
 
       const aEdge = {
-        id: uuidv4(),
+        id: uuid(),
         source: clickedEdge.source,
         target: newNode.id,
         sourceHandle: clickedEdge.sourceHandle,
         targetHandle: 'value',
       };
       const bEdge = {
-        id: uuidv4(),
+        id: uuid(),
         source: newNode.id,
         sourceHandle: 'value',
         target: clickedEdge.target,
@@ -599,7 +601,7 @@ export const EditorApp = React.forwardRef<
       graph.createEdge(aEdge);
       graph.createEdge(bEdge);
 
-      graph.update(newNode.id);
+      graph.capabilities.data.update(newNode.id);
       setNodes((nds) => [...nds, editorNode]);
 
       setEdges((eds) => {
@@ -697,7 +699,7 @@ export const EditorApp = React.forwardRef<
         newNodes.filter((x) => !!x).map((x) => x?.flowNode ?? ({} as Node)),
       );
     },
-    [handleSelectNewNodeType, reactFlowInstance],
+    [handleSelectNewNodeType, reactFlowInstance, selectAddedNodes],
   );
   const nodeCount = nodes.length;
   return (
diff --git a/packages/graph-editor/src/hooks/useIsValidConnection.ts b/packages/graph-editor/src/hooks/useIsValidConnection.ts
index 449b936eb..3d44800c4 100644
--- a/packages/graph-editor/src/hooks/useIsValidConnection.ts
+++ b/packages/graph-editor/src/hooks/useIsValidConnection.ts
@@ -1,4 +1,4 @@
-import { ANY, canConvertSchemaTypes } from '@tokens-studio/graph-engine';
+import { ANY, ControlFlowPort, DataFlowPort, canConvertSchemaTypes } from '@tokens-studio/graph-engine';
 import { Connection, useReactFlow } from 'reactflow';
 import { stripVariadic } from '@/utils/stripVariadic.js';
 import { useCallback } from 'react';
@@ -14,6 +14,9 @@ export interface IuseIsValidConnection {
   postProcessor?: (connection: Connection) => boolean;
 }
 
+
+type TypedPort = ControlFlowPort | DataFlowPort;
+
 export const useIsValidConnection = ({
   postProcessor,
 }: IuseIsValidConnection = {}) => {
@@ -36,7 +39,7 @@ export const useIsValidConnection = ({
 
       const strippedVariadic = stripVariadic(connection.targetHandle!);
 
-      let targetType = target?.inputs[strippedVariadic].type;
+      let targetType = (target?.inputs[strippedVariadic] as TypedPort).type;
 
       //They are trying to create a dynamic input. Allow non dynamic sets to connect
       if (
@@ -46,11 +49,20 @@ export const useIsValidConnection = ({
         return !target.inputs[strippedVariadic]?.isConnected;
       }
 
-      let sourceType = connection.sourceHandle
-        ? source?.outputs[connection.sourceHandle].type
-        : null;
+      const srcPort = source.outputs[connection.sourceHandle!];
+      const tgtPort = target.inputs[strippedVariadic];
+
+      //Do not allow connections of different port types
+      if (srcPort && tgtPort) {
+        if (srcPort.pType !== tgtPort.pType) {
+          return false
+        }
+      }
+
+
+      let sourceType = (srcPort as TypedPort).type || null;
 
-      if (target.inputs[strippedVariadic].type.items) {
+      if ((target.inputs[strippedVariadic] as TypedPort).type.items) {
         targetType = target.inputs[strippedVariadic].type.items;
       }
       if (source.outputs[connection.sourceHandle!].type.items) {
diff --git a/packages/graph-editor/src/redux/models/graph.ts b/packages/graph-editor/src/redux/models/graph.ts
index a176d9a11..a5b55cf5c 100644
--- a/packages/graph-editor/src/redux/models/graph.ts
+++ b/packages/graph-editor/src/redux/models/graph.ts
@@ -1,7 +1,8 @@
-import { Graph, annotatedPlayState } from '@tokens-studio/graph-engine';
+import { FullyFeaturedGraph } from '@/types/index.js';
 import { ImperativeEditorRef } from '@/editor/editorTypes.js';
 import { MAIN_GRAPH_ID } from '@/constants.js';
 import { RootModel } from './root.js';
+import {  annotatedPlayState } from '@tokens-studio/graph-engine';
 import { createModel } from '@rematch/core';
 import type { PlayState } from '@tokens-studio/graph-engine';
 
@@ -12,12 +13,12 @@ export interface ILog {
 }
 
 export interface IPanel {
-  graph: Graph;
+  graph: FullyFeaturedGraph;
   ref: ImperativeEditorRef;
 }
 
 export interface GraphState {
-  graph: Graph | undefined;
+  graph: FullyFeaturedGraph | undefined;
   currentNode: string;
   logs: ILog[];
   graphPlayState: PlayState;
@@ -83,28 +84,28 @@ export const graphState = createModel<RootModel>()({
       };
     },
     startGraph(state) {
-      state.graph?.start();
+      state.graph?.capabilities.controlFlow.start();
       return {
         ...state,
         graphPlayState: state.graph?.annotations[annotatedPlayState],
       };
     },
     pauseGraph(state) {
-      state.graph?.pause();
+      state.graph?.capabilities.controlFlow.pause();
       return {
         ...state,
         graphPlayState: state.graph?.annotations[annotatedPlayState],
       };
     },
     resumeGraph(state) {
-      state.graph?.resume();
+      state.graph?.capabilities.controlFlow.resume();
       return {
         ...state,
         graphPlayState: state.graph?.annotations[annotatedPlayState],
       };
     },
     stopGraph(state) {
-      state.graph?.stop();
+      state.graph?.capabilities.controlFlow.stop();
       return {
         ...state,
         graphPlayState: state.graph?.annotations[annotatedPlayState],
@@ -116,7 +117,7 @@ export const graphState = createModel<RootModel>()({
         logs: [],
       };
     },
-    setGraph(state, graph: Graph) {
+    setGraph(state, graph: FullyFeaturedGraph) {
       return {
         ...state,
         graph,
diff --git a/packages/graph-editor/src/redux/models/registry.ts b/packages/graph-editor/src/redux/models/registry.ts
index 50a97aa59..42c738a5a 100644
--- a/packages/graph-editor/src/redux/models/registry.ts
+++ b/packages/graph-editor/src/redux/models/registry.ts
@@ -17,7 +17,7 @@ export const registryState = createModel<RootModel>()({
   state: {
     inputControls: { ...inputControls },
     schemas: AllSchemas,
-  } as RegistryState,
+  } as unknown as RegistryState,
   reducers: {
     setSchemas(state, schemas: SchemaObject[]) {
       return {
diff --git a/packages/graph-editor/src/registry/control.tsx b/packages/graph-editor/src/registry/control.tsx
index 75a53331e..ac4f2e951 100644
--- a/packages/graph-editor/src/registry/control.tsx
+++ b/packages/graph-editor/src/registry/control.tsx
@@ -3,13 +3,12 @@ import {
   BOOLEAN,
   COLOR,
   CURVE,
+  DataFlowPort,
   FLOATCURVE,
   Input,
   NUMBER,
-  Port,
   STRING,
   VEC2,
-  VEC3,
 } from '@tokens-studio/graph-engine';
 import { AnyField } from '@/components/controls/any.js';
 import { ArrayField } from '@/components/controls/array.js';
@@ -27,9 +26,8 @@ import { VariadicAny } from '@/components/controls/variadicAny.js';
 import { VariadicColor } from '@/components/controls/variadicColor.js';
 import { VariadicNumber } from '@/components/controls/variadicNumber.js';
 import { Vec2field } from '@/components/controls/vec2.js';
-import { Vec3field } from '@/components/controls/vec3.js';
 
-export const variadicMatcher = (id) => (port: Port) =>
+export const variadicMatcher = (id) => (port: DataFlowPort) =>
   port.type.type === 'array' &&
   port.type.items.$id === id &&
   (port as Input).variadic;
@@ -39,57 +37,53 @@ export const variadicMatcher = (id) => (port: Port) =>
  */
 export const defaultControls = [
   {
-    matcher: (port: Port) => port.annotations['ui.control'] === 'slider',
+    matcher: (port: DataFlowPort) => port.annotations['ui.control'] === 'slider',
     component: SliderField,
   },
   {
-    matcher: (port: Port) => port.type.$id === FLOATCURVE,
+    matcher: (port: DataFlowPort) => port.type.$id === FLOATCURVE,
     component: FloatCurveField,
   },
   {
-    matcher: (port: Port) => port.type.$id === CURVE,
+    matcher: (port: DataFlowPort) => port.type.$id === CURVE,
     component: CurveField,
   },
 
   {
-    matcher: (port: Port) => port.type.$id === BOOLEAN,
+    matcher: (port: DataFlowPort) => port.type.$id === BOOLEAN,
     component: BooleanField,
   },
   {
-    matcher: (port: Port) => port.type.$id === COLOR,
+    matcher: (port: DataFlowPort) => port.type.$id === COLOR,
     component: ColorField,
   },
   {
-    matcher: (port: Port) => port.type.$id === NUMBER,
+    matcher: (port: DataFlowPort) => port.type.$id === NUMBER,
     component: NumericField,
   },
   {
-    matcher: (port: Port) => port.type.$id === STRING && port.type.enum,
+    matcher: (port: DataFlowPort) => port.type.$id === STRING && port.type.enum,
     component: EnumeratedTextfield,
   },
   {
-    matcher: (port: Port) =>
+    matcher: (port: DataFlowPort) =>
       port.type.$id === STRING && port.annotations['ui.control'] === 'textarea',
     component: TextArea,
   },
   {
-    matcher: (port: Port) => port.type.$id === STRING,
+    matcher: (port: DataFlowPort) => port.type.$id === STRING,
     component: Textfield,
   },
   {
-    matcher: (port: Port) => port.type.$id === VEC2,
+    matcher: (port: DataFlowPort) => port.type.$id === VEC2,
     component: Vec2field,
   },
   {
-    matcher: (port: Port) => port.type.$id === VEC3,
-    component: Vec3field,
-  },
-  {
-    matcher: (port: Port) => port.type.$id === ANY,
+    matcher: (port: DataFlowPort) => port.type.$id === ANY,
     component: AnyField,
   },
   {
-    matcher: (port: Port) =>
+    matcher: (port: DataFlowPort) =>
       port.type.type === 'array' && !(port as Input).variadic,
     component: ArrayField,
   },
diff --git a/packages/graph-editor/src/registry/inputControls.tsx b/packages/graph-editor/src/registry/inputControls.tsx
index f1bfd9069..771e0cc2d 100644
--- a/packages/graph-editor/src/registry/inputControls.tsx
+++ b/packages/graph-editor/src/registry/inputControls.tsx
@@ -1,5 +1,5 @@
 import { Button, Heading, Select, Stack } from '@tokens-studio/ui';
-import { Node } from '@tokens-studio/graph-engine';
+import { DataflowNode } from '@tokens-studio/graph-engine';
 import { StringSchema } from '@tokens-studio/graph-engine';
 import { deletable } from '@/annotations/index.js';
 import { observer } from 'mobx-react-lite';
@@ -10,17 +10,18 @@ import properties from 'mdn-data/css/properties.json' with { type: 'json' };
 
 const CSSProperties = Object.keys(properties);
 
-const CSSMapSpecifics = observer(({ node }: { node: Node }) => {
+const CSSMapSpecifics = observer(({ node }: { node: DataflowNode }) => {
   const [inputName, setInputName] = React.useState('-');
 
   const onClick = () => {
-    const input = node.addInput(inputName, {
+    node.dataflow.addInput(inputName, {
       type: StringSchema,
       visible: true,
     });
-    input.annotations[deletable] = true;
+    const input = node.inputs[inputName];
+    input.setAnnotation(deletable, true);
     setInputName('');
-    node.run();
+    node.dataflow?.run();
   };
 
   const isDisabled = useMemo(() => {
@@ -52,6 +53,6 @@ const CSSMapSpecifics = observer(({ node }: { node: Node }) => {
   );
 });
 
-export const inputControls = {
+export const inputControls: Record<string, React.FC<{ node: DataflowNode }>> = {
   'studio.tokens.css.map': CSSMapSpecifics,
-} as Record<string, React.FC<{ node: Node }>>;
+};
diff --git a/packages/graph-editor/src/registry/specifics.tsx b/packages/graph-editor/src/registry/specifics.tsx
index 055019de4..e923c5150 100644
--- a/packages/graph-editor/src/registry/specifics.tsx
+++ b/packages/graph-editor/src/registry/specifics.tsx
@@ -3,12 +3,12 @@ import { ColorCompare } from '@/components/preview/colorCompare.js';
 import { ColorScale } from '@/components/preview/colorScale.js';
 import { ColorSwatch } from '@/components/preview/swatch.js';
 import { CurveField } from '@/components/controls/curve.js';
+import { DataflowNode, Input } from '@tokens-studio/graph-engine';
 import { ErrorBoundary } from 'react-error-boundary';
 import { ErrorBoundaryContent } from '@/components/ErrorBoundaryContent.js';
 import { GraphEditor } from '@/editor/graphEditor.js';
 import { ImperativeEditorRef } from '../index.js';
 import { MathExpression } from '@/components/preview/mathExpression.js';
-import { Node } from '@tokens-studio/graph-engine';
 import { title as annotatedTitle } from '@/annotations/index.js';
 import { dockerSelector } from '@/redux/selectors/refs.js';
 import { observer } from 'mobx-react-lite';
@@ -67,34 +67,34 @@ const SubgraphExplorer = ({ node }) => {
   );
 };
 
-const ColorComparePreview = observer(({ node }: { node: Node }) => {
+const ColorComparePreview = observer(({ node }: { node: DataflowNode }) => {
   return (
     <ColorCompare
       colors={[
-        node.inputs.colorA.value || '#ffffff',
-        node.inputs.colorB.value || '#000000',
+        (node.inputs.colorA as Input).value || '#ffffff',
+        (node.inputs.colorB as Input).value || '#000000',
       ]}
     />
   );
 });
 
-const ColorScalePreview = observer(({ node }: { node: Node }) => {
-  return <ColorScale scale={node.inputs.value.value} />;
+const ColorScalePreview = observer(({ node }: { node: DataflowNode }) => {
+  return <ColorScale scale={(node.inputs.value as Input).value} />;
 });
 
-const CurvePreview = observer(({ node }: { node: Node }) => {
-  return <CurveField port={node.inputs.value} readOnly />;
+const CurvePreview = observer(({ node }: { node: DataflowNode }) => {
+  return <CurveField port={(node.inputs.value as Input) } readOnly />;
 });
 
-const MathExpressionPreview = observer(({ node }: { node: Node }) => {
-  return <MathExpression value={node.inputs.value.value} />;
+const MathExpressionPreview = observer(({ node }: { node: DataflowNode }) => {
+  return <MathExpression value={(node.inputs.value as Input).value} />;
 });
 
-const SwatchPreview = observer(({ node }: { node: Node }) => {
-  return <ColorSwatch value={node.inputs.value.value} />;
+const SwatchPreview = observer(({ node }: { node: DataflowNode }) => {
+  return <ColorSwatch value={(node.inputs.value as Input).value} />;
 });
 
-const NumberPreview = observer(({ node }: { node: Node }) => {
+const NumberPreview = observer(({ node }: { node: DataflowNode }) => {
   const { precision, value } = node.getAllInputs();
 
   const shift = 10 ** precision;
diff --git a/packages/graph-editor/src/types/index.ts b/packages/graph-editor/src/types/index.ts
index 7ae828a44..502d0befd 100644
--- a/packages/graph-editor/src/types/index.ts
+++ b/packages/graph-editor/src/types/index.ts
@@ -1,3 +1,4 @@
+import { ApplyCapabilities, Graph, WithControlFlow, WithDataFlow } from '@tokens-studio/graph-engine';
 import { TokenType } from '../utils/index.js';
 
 export type Token = {
@@ -6,4 +7,6 @@ export type Token = {
   type: TokenType;
 };
 
+export type FullyFeaturedGraph = ApplyCapabilities<Graph, [WithControlFlow, WithDataFlow]>
+
 export * from './controls.js';
diff --git a/packages/graph-editor/vite.config.ts b/packages/graph-editor/vite.config.ts
index 36dbb7a2e..7a417edd7 100644
--- a/packages/graph-editor/vite.config.ts
+++ b/packages/graph-editor/vite.config.ts
@@ -7,8 +7,12 @@ import tsconfigPaths from 'vite-tsconfig-paths';
 export default defineConfig({
   server: {
     port: 3001,
+    cors:false
   },
   mode: 'development',
   root: 'examples/defaults',
+  define: {
+    'process.env': {}
+  },
   plugins: [react({ tsDecorators: true }), tsconfigPaths()],
 });
diff --git a/packages/graph-engine/package.json b/packages/graph-engine/package.json
index 0c60157c2..ebf5ebba1 100644
--- a/packages/graph-engine/package.json
+++ b/packages/graph-engine/package.json
@@ -42,6 +42,7 @@
     "@bundled-es-modules/deepmerge": "^4.3.1",
     "@tokens-studio/types": "^0.5.1",
     "ajv": "^8.17.1",
+    "axios": "^1.7.3",
     "color-blind-esm": "^0.1.4",
     "colorjs.io": "^0.5.2",
     "compare-versions": "^6.1.0",
@@ -51,9 +52,9 @@
     "lodash-es": "^4.17.21",
     "mdn-data": "^2.3.0",
     "mobx": "^6.12.0",
+    "nanoid": "^5.0.7",
     "poline": "^0.7.0",
     "postcss-value-parser-esm": "^4.2.0",
-    "uuid": "^9.0.1",
     "z-schema-esm": "^6.0.1"
   },
   "devDependencies": {
@@ -73,4 +74,4 @@
     "tokens",
     "ui"
   ]
-}
\ No newline at end of file
+}
diff --git a/packages/graph-engine/src/capabilities/controlFlow.ts b/packages/graph-engine/src/capabilities/controlFlow.ts
new file mode 100644
index 000000000..6558c5f57
--- /dev/null
+++ b/packages/graph-engine/src/capabilities/controlFlow.ts
@@ -0,0 +1,107 @@
+import { CapabilityFactory } from './interface.js';
+import { ControlFlowInput } from '@/programmatic/controlflow/input.js';
+import { ControlFlowNode } from '@/programmatic/nodes/controlflow.js';
+import { ControlFlowOutput } from '../programmatic/controlflow/output.js';
+import { Graph } from '../graph/index.js';
+import { GraphSchema } from '@/schemas/index.js';
+import { annotatedPlayState } from '@/annotations/index.js';
+
+export interface ControlFlowCapability {
+	start: () => void;
+	stop: () => void;
+	pause: () => void;
+	resume: () => void;
+	/**
+	 * Sends a message from an output to all connected inputs
+	 * @param output
+	 * @param val
+	 * @returns
+	 */
+	ripple: <T = any>(
+		output: ControlFlowOutput,
+		val: T,
+		type?: GraphSchema
+	) => void;
+}
+
+export enum PlayState {
+	PLAYING = 'playing',
+	STOPPED = 'stopped',
+	PAUSED = 'paused'
+}
+
+export const ControlFlowCapabilityFactory: CapabilityFactory = {
+	name: 'controlFlow',
+	register: (graph: Graph) => {
+		graph.onFinalize('nodeAdded', node => {
+			//Trigger the onStart event if the graph is in play mode
+			if (graph.annotations[annotatedPlayState] === PlayState.PLAYING) {
+				(node as ControlFlowNode).controlflow?.onStart();
+			}
+			return node;
+		});
+
+		graph.onFinalize('serialize', serialized => {
+			//Make sure the playing state is not serialized. This would likely cause issues
+			delete serialized.annotations[annotatedPlayState];
+			return serialized;
+		});
+
+		const ctx = {
+			/**
+			 * Triggers a ripple effect on the graph starting from the given edge
+			 * @returns
+			 */
+			ripple<T>(output: ControlFlowOutput, val: T, type?: GraphSchema) {
+				//Get the edges
+				const edges = output._edges;
+				edges.forEach(edge => {
+					const input = graph.getNode(edge.target)?.inputs[edge.targetHandle];
+					if (!input) {
+						return;
+					}
+					(input as ControlFlowInput).trigger(val, type);
+					graph.emit('valueSent', edges);
+				});
+			},
+			start: () => {
+				graph.annotations[annotatedPlayState] = 'playing';
+				graph.emit('start', {});
+				// Trigger the start of all the nodes
+				graph.forEachNode(node =>
+					(node as ControlFlowNode).controlflow?.onStart()
+				);
+			},
+			stop: () => {
+				graph.annotations[annotatedPlayState] = PlayState.STOPPED;
+				graph.emit('stop', {});
+				// Trigger the stop of all the nodes
+				graph.forEachNode(node =>
+					(node as ControlFlowNode).controlflow?.onStop()
+				);
+			},
+			pause: () => {
+				graph.annotations[annotatedPlayState] = PlayState.PAUSED;
+				graph.emit('pause', {});
+				// Trigger the pause of all the nodes
+				graph.forEachNode(node =>
+					(node as ControlFlowNode).controlflow?.onPause()
+				);
+			},
+			resume: () => {
+				graph.annotations[annotatedPlayState] = PlayState.PLAYING;
+				graph.emit('resume', {});
+				// Trigger the resume of all the nodes
+				graph.forEachNode(node =>
+					(node as ControlFlowNode).controlflow?.onResume()
+				);
+			}
+		} as ControlFlowCapability;
+
+		return ctx;
+	}
+};
+
+export type WithControlFlow = {
+	controlFlow: ControlFlowCapability;
+};
diff --git a/packages/graph-engine/src/capabilities/dataflow.ts b/packages/graph-engine/src/capabilities/dataflow.ts
new file mode 100644
index 000000000..a5acb5635
--- /dev/null
+++ b/packages/graph-engine/src/capabilities/dataflow.ts
@@ -0,0 +1,327 @@
+import { CapabilityFactory } from './interface.js';
+import { DATAFLOW_PORT } from '@/programmatic/dataflow/base.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
+import { Graph, topologicalSort } from '../graph/index.js';
+import { GraphSchema } from '@/schemas/index.js';
+import { ISetValue, Output } from '@/programmatic/index.js';
+import { Input } from '@/programmatic/dataflow/input.js';
+import { annotatedVariadicIndex } from '@/annotations/index.js';
+import { dedupe } from '../utils/dedupe.js';
+
+export interface DataFlowCapability {
+	/**
+	 * Will forcefully update a node in the graph. This will also update all the edges that are connected to the node recursively
+	 * @throws[Error] if the node is not found
+	 * @param nodeID
+	 */
+	update(nodeID: string, opts?: IUpdateOpts): Promise<void>;
+	/**
+	 * Triggers the execution of the node and updates the successor nodes
+	 * @param nodeId
+	 * @param oneShot
+	 * @returns
+	 */
+	propagate(nodeId: string, oneShot?: boolean): Promise<void>;
+	/**
+	 * Executes the graph as a single batch. This will execute all the nodes in the graph and return the output of the output node
+	 * Note that this can have side effects and you should create a new instance of a graph between runs if you want to isolate the execution
+	 * @param opts
+	 * @throws {BatchRunError}
+	 * @returns
+	 */
+	execute(opts?: GraphExecuteOptions): Promise<BatchExecution>;
+}
+
+export type InputDefinition = {
+	value: any;
+	type?: GraphSchema;
+};
+
+export type GraphExecuteOptions = {
+	inputs?: Record<string, InputDefinition>;
+	/**
+	 * Whether to track and emit stats as part of the execution
+	 */
+	stats?: boolean;
+	/**
+	 * Whether to provide a journal of the execution
+	 */
+	journal?: boolean;
+};
+
+export interface StatRecord {
+	start: number;
+	end: number;
+	error?: Error;
+}
+
+export interface IUpdateOpts {
+	/**
+	 * If true, no memoization will be performed
+	 */
+	noMemo?: boolean;
+	/**
+	 * If true, the update will not be propagated to the successor nodes
+	 */
+	noRecursive?: boolean;
+	/**
+	 * If true, we won't compare the input values to see if the node needs to be updated
+	 */
+	noCompare?: boolean;
+}
+
+export interface BatchExecution {
+	start: number;
+	end: number;
+	stats?: Record<string, StatRecord>;
+	order: string[];
+	output?: {
+		[key: string]: {
+			value: any;
+			type: GraphSchema;
+		};
+	};
+}
+
+export const DataFlowCapabilityFactory: CapabilityFactory = {
+	name: 'dataFlow',
+	register: (graph: Graph) => {
+		const ctx = {
+			async update(nodeID: string, opts?: IUpdateOpts) {
+				const { noRecursive = false } = opts || {};
+
+				const node = graph.nodes[nodeID];
+				if (!node) {
+					throw new Error(`No node found with id ${nodeID}`);
+				}
+
+				const res = await (node as DataflowNode).dataflow?.run();
+				//Don't propagate if there is an error
+				if (res.error) {
+					return;
+				}
+
+				if (noRecursive) {
+					return;
+				}
+
+				await ctx.propagate(node.id);
+			},
+
+			async propagate(nodeId: string, oneShot: boolean = false) {
+				const node = graph.getNode(nodeId);
+				if (!node) {
+					return;
+				}
+				//Update all the outgoing edges
+				const outEdges = graph.outEdges(node.id);
+				/**
+				 * This is a heuristic to not attempt to update nodes that don't have a detected port at the end-
+				 */
+				const affectedNodes = outEdges
+					.map(edge => {
+						const output = node.outputs[edge.sourceHandle] as Output;
+
+						//It might be dynamic
+						if (!output || output.pType !== DATAFLOW_PORT) {
+							return;
+						}
+						const value = output.value;
+						//write the value to the input port of the target
+						const target = graph.getNode(edge.target);
+						if (!target) {
+							return;
+						}
+						const input = target.inputs[edge.targetHandle] as Input;
+						if (!input) {
+							return;
+						}
+
+						if (input.variadic) {
+							//Don't attempt mutation of the original array
+							const newVal = [...(input.value || [])];
+							newVal[edge.annotations[annotatedVariadicIndex]!] = output.value;
+							//Extend the variadic array
+							input.setValue(newVal, {
+								//We are controlling propagation
+								noPropagate: true
+							});
+						} else {
+							input.setValue(value, {
+								type: output.type,
+								//We are controlling propagation
+								noPropagate: true
+							});
+						}
+
+						return edge.target;
+					})
+					//Remove holes
+					.filter(Boolean) as string[];
+
+				if (!oneShot) {
+					//These are the nodes to be update
+					const nodes = dedupe(affectedNodes);
+					await Promise.all(nodes.map(x => ctx.update(x)));
+				}
+			},
+
+			async execute(opts?: GraphExecuteOptions): Promise<BatchExecution> {
+				const { inputs, stats } = opts || {};
+
+				const start = performance.now();
+				const statsTracker = {};
+
+				if (inputs) {
+					const input = Object.values(graph.nodes).find(
+						x => x.factory.type === 'studio.tokens.generic.input'
+					);
+					if (!input) {
+						throw new Error('No input node found');
+					}
+
+					//Set the inputs for execution
+					Object.entries(inputs).forEach(([key, value]) => {
+						const opts: ISetValue = {
+							//We are controlling propagation
+							noPropagate: true
+						};
+						//Only necessary if there is dynamic typing involved
+						if (value.type) {
+							opts.type = value.type;
+						}
+						const port = input.inputs[key] as Input;
+
+						if (port && port.pType == DATAFLOW_PORT) {
+							port.setValue(value.value, opts);
+						}
+
+						//Its possible that there is no input with the name
+					});
+				}
+
+				//Perform a topological sort
+
+				const topologic = topologicalSort(graph);
+				//This stores intermediate states during execution
+				for (let i = 0, c = topologic.length; i < c; i++) {
+					const nodeId = topologic[i];
+
+					const node = graph.getNode(nodeId);
+
+					// Might happen with graphs that have not cleaned up their edges to nowhere
+					if (!node) {
+						continue;
+					}
+					//Execute the node
+					const res = await (node as DataflowNode).dataflow?.run();
+					if (res.error) {
+						//@ts-ignore
+						(res.error as BatchRunError).nodeId = nodeId;
+						throw res.error;
+					}
+
+					if (stats) {
+						statsTracker[nodeId] = res;
+					}
+
+					//Propagate the values. No need to wait as it is a oneshot
+					ctx.propagate(nodeId, true);
+				}
+
+				let output: BatchExecution['output'] = undefined;
+
+				//Get the output node
+				const outputNode = Object.values(graph.nodes).find(
+					x => x.factory.type === 'studio.tokens.generic.output'
+				);
+
+				if (outputNode) {
+					//Output has a dynamic amount of ports, so emit a single object with each of them
+					output = Object.fromEntries(
+						// eslint-disable-next-line @typescript-eslint/no-unused-vars
+						Object.entries(outputNode.inputs)
+							.filter(([_, v]) => v.pType == DATAFLOW_PORT)
+							.map(([key, value]: [string, Output]) => {
+								return [
+									key,
+									{
+										value: value.value,
+										type: value.type
+									}
+								];
+							})
+					);
+				}
+
+				const end = performance.now();
+				return {
+					order: topologic,
+					stats: statsTracker,
+					start,
+					end,
+					output
+				};
+			}
+		} as DataFlowCapability;
+
+		graph.on('edgeRemoved', edge => {
+			//Try get the node
+			const target = graph.getNode(edge.target);
+
+			//No sidefffects when not a dataflow node
+			if (!(target as DataflowNode).dataflow) {
+				return;
+			}
+
+			const input = target.inputs[edge.targetHandle] as Input;
+			const index = edge.annotations[annotatedVariadicIndex]!;
+
+			//We need to check if its pointing to a variadic input and compact it if needed
+			if (input.variadic) {
+				//Remove the index
+				const newVal = [...(input.value || [])];
+				newVal.splice(index, 1);
+				input.setValue(newVal, {
+					noPropagate: true
+				});
+			}
+
+			//Check if we should recompute the node
+			if ((target as DataflowNode)?.dataflow) {
+				ctx.update(target.id);
+			}
+		});
+
+		graph.onFinalize('edgeAdded', edge => {
+			const targetNode = graph.getNode(edge.target);
+			//No sidefffects when not a dataflow node
+			if ((targetNode as DataflowNode).dataflow) {
+				const sourceNode = graph.getNode(edge.source);
+				const targetPort = targetNode.inputs[edge.targetHandle] as Input;
+				const sourcePort = sourceNode.outputs[edge.sourceHandle] as Output;
+				if (targetPort.variadic) {
+					//Extend the variadic array
+					targetPort.setValue(
+						(targetPort.value || []).concat([sourcePort.value]),
+						{
+							//TODO
+							// Note that this is a quick fix and that we should probably restrict the update of the typing so that it cannot be overriden later
+							type: {
+								type: 'array',
+								items: sourcePort.type
+							}
+						}
+					);
+				}
+				ctx.propagate(edge.source);
+			}
+			return edge;
+		});
+		return ctx;
+	}
+};
+
+export type WithDataFlow = {
+	dataFlow: DataFlowCapability;
+};
diff --git a/packages/graph-engine/src/capabilities/interface.ts b/packages/graph-engine/src/capabilities/interface.ts
new file mode 100644
index 000000000..c939bc4d7
--- /dev/null
+++ b/packages/graph-engine/src/capabilities/interface.ts
@@ -0,0 +1,33 @@
+import { Capabilities, Graph } from '@/graph/graph.js';
+
+export type CapabilityFactory = {
+	name: string;
+	register: (graph: Graph) => any;
+	version?: string;
+};
+
+export type CombineCapabilities<
+	T extends Graph,
+	AdditionalCapabilities extends Capabilities
+> = Omit<Graph, 'capabilities'> & {
+	capabilities: T['capabilities'] & AdditionalCapabilities;
+};
+
+type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (
+	k: infer I
+) => void
+	? I
+	: never;
+
+/**
+ * Applies the capabilities to the graph so it can be staticly typed
+ *
+ * @example
+ * ```ts
+ * type FullyFeaturedGraph = ApplyCapabilities<Graph, [WithControlFlow, WithDataFlow]>;
+ * ````
+ */
+export type ApplyCapabilities<
+	T extends Graph,
+	CapabilityTypes extends Capabilities[]
+> = CombineCapabilities<T, UnionToIntersection<CapabilityTypes[number]>>;
diff --git a/packages/graph-engine/src/capabilities/secret.ts b/packages/graph-engine/src/capabilities/secret.ts
index 4aa68156d..9a5f48830 100644
--- a/packages/graph-engine/src/capabilities/secret.ts
+++ b/packages/graph-engine/src/capabilities/secret.ts
@@ -1,4 +1,4 @@
-import { CapabilityFactory } from '../graph/index.js';
+import { CapabilityFactory } from './interface.js';
 
 export type SecretConfig = {
 	secret: string;
diff --git a/packages/graph-engine/src/graph/graph.ts b/packages/graph-engine/src/graph/graph.ts
index 29581be36..c22d18848 100644
--- a/packages/graph-engine/src/graph/graph.ts
+++ b/packages/graph-engine/src/graph/graph.ts
@@ -1,41 +1,20 @@
-import { AnySchema, GraphSchema } from '../schemas/index.js';
+import { AnySchema } from '@/schemas/index.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { Edge, VariadicEdgeData } from '../programmatic/edge.js';
-import { ILogger, baseLogger } from './interfaces.js';
-import { ISetValue, Input } from '../programmatic/input.js';
-import { Node } from '../programmatic/node.js';
-import { Output } from '../programmatic/output.js';
+import { Node } from '../programmatic/nodes/node.js';
+import { Port } from '@/programmatic/port.js';
 import { VERSION } from '../constants.js';
 import {
-	annotatedCapabilityPrefix,
 	annotatedId,
-	annotatedPlayState,
 	annotatedVariadicIndex,
 	annotatedVersion
 } from '../annotations/index.js';
 import { compareVersions } from 'compare-versions';
 import { makeObservable, observable, toJS } from 'mobx';
-import { topologicalSort } from './topologicSort.js';
-import { v4 as uuid } from 'uuid';
+import { nanoid as uuid } from 'nanoid';
 import type { ExternalLoader, NodeRun, NodeStart } from '../types.js';
 import type { NodeLoader, SerializedGraph } from './types.js';
 
-export type CapabilityFactory = {
-	name: string;
-	register: (graph: Graph) => any;
-	version?: string;
-};
-
-export type InputDefinition = {
-	value: any;
-	type?: GraphSchema;
-};
-
-export type GraphExecuteOptions = {
-	/**
-	 * Throws an error if the input/output nodes are not found
-	 */
-	strict?: boolean;
-
 	inputs?: Record<string, InputDefinition>;
 	/**
 	 * Whether to track and emit stats as part of the execution
@@ -72,13 +51,16 @@ export type FinalizerType = 'serialize' | 'output';
 export type FinalizerLookup = {
 	serialize: SerializedGraph;
 	output: any;
+	clone: Graph;
+	edgeAdded: Edge;
+	nodeAdded: Node;
 };
 
 export type SubscriptionLookup = {
 	nodeAdded: Node;
 	nodeRemoved: string;
 	edgeAdded: Edge;
-	edgeRemoved: string;
+	edgeRemoved: Edge;
 	nodeUpdated: Node;
 	edgeUpdated: Edge;
 	start: object;
@@ -108,50 +90,13 @@ export type FinalizerExecutor<Type extends keyof FinalizerLookup> = (
 	value: SerializerType<Type>
 ) => SerializerType<Type>;
 
-export type PlayState = 'playing' | 'paused' | 'stopped';
-
 export interface IGraph {
-	/**
-	 * Whether to automatically update the graph when the state changes or to wait for an explicit call to update
-	 */
-	autoUpdate?: boolean;
 	annotations?: Record<string, any>;
 }
 
-export interface IUpdateOpts {
-	/**
-	 * If true, no memoization will be performed
-	 */
-	noMemo?: boolean;
-	/**
-	 * If true, the update will not be propagated to the successor nodes
-	 */
-	noRecursive?: boolean;
-	/**
-	 * If true, we won't compare the input values to see if the node needs to be updated
-	 */
-	noCompare?: boolean;
-}
-
-export interface StatRecord {
-	start: number;
-	end: number;
-	error?: Error;
-}
-
-export interface BatchExecution {
-	start: number;
-	end: number;
-	stats?: Record<string, StatRecord>;
-	order: string[];
-	output?: {
-		[key: string]: {
-			value: any;
-			type: GraphSchema;
-		};
-	};
-}
-
+export type Capabilities = {
+	[key: string]: any;
+};
 const defaultGraphOpts: IGraph = {
 	annotations: {}
 };
@@ -160,13 +105,18 @@ const defaultGraphOpts: IGraph = {
  * This is our internal graph representation that we use to perform transformations on
  */
 export class Graph {
-	private finalizers: Record<string, any[]> = {};
-	private listeners: Record<string, any[]> = {};
+	finalizers: Record<string, any[]> = {};
+	listeners: Record<string, any[]> = {};
 	public annotations: Record<string, any> = {};
 
+	/**
+	 * Used internally to store capability factories
+	 */
+	registeredCapabilities: CapabilityFactory[] = [];
+
 	nodes: Record<string, Node>;
 	edges: Record<string, Edge>;
-	capabilities: Record<string, any> = {};
+	capabilities: Capabilities;
 
 	logger: ILogger = baseLogger;
 
@@ -188,6 +138,7 @@ export class Graph {
 		this.annotations = input.annotations || {};
 		this.nodes = {};
 		this.edges = {};
+		this.capabilities = {};
 
 		makeObservable(this, {
 			annotations: observable.shallow
@@ -196,81 +147,6 @@ export class Graph {
 		this.annotations[annotatedId] || (this.annotations[annotatedId] = uuid());
 	}
 
-	/**
-	 * Meant to be used internally by nodes to load resources
-	 * @param uri
-	 * @param node
-	 * @param data
-	 * @returns
-	 */
-	async loadResource(uri: string, node: Node, data?: any) {
-		if (!this.externalLoader) {
-			throw new Error('No external loader specified');
-		}
-		return this.externalLoader({
-			uri,
-			graph: this,
-			node,
-			data
-		});
-	}
-
-	/**
-	 * Connects two nodes together. If the target is variadic, it will automatically add the index to the edge data if not provided
-	 * @param source
-	 * @param sourceHandle
-	 * @param target
-	 * @param targetHandle
-	 * @param variadicIndex
-	 * @returns
-	 */
-	connect(
-		source: Node,
-		sourceHandle: Output,
-		target: Node,
-		targetHandle: Input,
-		variadicIndex: number = -1
-	): Edge {
-		//If its variadic we need to check the existing edges
-		let annotations = {};
-		if (targetHandle.variadic) {
-			const edges = this.inEdges(target.id, targetHandle.name);
-			//The number of edges is the new index
-			annotations = {
-				[annotatedVariadicIndex]:
-					variadicIndex == -1 ? edges.length : variadicIndex
-			} as VariadicEdgeData;
-		}
-		//Check to see if there is already a connection on the target
-		if (targetHandle._edges.length > 0 && !targetHandle.variadic) {
-			throw new Error(
-				`Input ${targetHandle.name} on node ${target.id} is already connected`
-			);
-		}
-
-		//TODO validation of type
-		return this.createEdge({
-			id: uuid(),
-			source: source.id,
-			target: target.id,
-			sourceHandle: sourceHandle.name,
-			targetHandle: targetHandle.name,
-			annotations
-		});
-	}
-
-	/**
-	 * Checks to see if there exists any connection for an input
-	 * @param source
-	 * @param port
-	 * @returns
-	 */
-	hasConnectedInput(source: Node, input: Input): boolean {
-		const edges = this.inEdges(source.id);
-
-		return edges.some(x => x.targetHandle === input.name);
-	}
-
 	/**
 	 * Clears the graph
 	 */
@@ -280,10 +156,6 @@ export class Graph {
 	}
 
 	addNode(node: Node) {
-		if (node.factory) {
-			this.checkCapabilitites(node.factory.annotations);
-		}
-
 		this.nodes[node.id] = node;
 		this.emit('nodeAdded', node);
 
@@ -319,6 +191,11 @@ export class Graph {
 		return true;
 	}
 
+	/**
+	 * Removes an edge connection between two nodes
+	 * @param edgeId
+	 * @returns
+	 */
 	removeEdge(edgeId: string) {
 		const edge = this.edges[edgeId];
 		if (!edge) {
@@ -346,15 +223,6 @@ export class Graph {
 					return acc.concat(x);
 				}, [] as Edge[]);
 			}
-			//We need to check if its pointing to a variadic input and compact it if needed
-			if (input.variadic) {
-				//Remove the index
-				const newVal = [...(input.value || [])];
-				newVal.splice(index, 1);
-				input.setValue(newVal, {
-					noPropagate: true
-				});
-			}
 		}
 
 		// Get the sources, there might be multiple, and we should not set the output to be disconnected if there are multiple
@@ -371,7 +239,7 @@ export class Graph {
 
 		//We do not update the value or recalculate here since that might result in a lot of unnecessary updates
 
-		this.emit('edgeRemoved', edgeId);
+		this.emit('edgeRemoved', edge);
 	}
 	/**
 	 * Retrieves a flat list of all the nodes ids in the graph
@@ -381,14 +249,6 @@ export class Graph {
 		return Object.keys(this.nodes);
 	}
 
-	/**
-	 * Will forcefully update a node in the graph. This will also update all the edges that are connected to the node recursively
-	 * @throws[Error] if the node is not found
-	 * @param nodeID
-	 */
-	async update(nodeID: string, opts?: IUpdateOpts) {
-		const { noRecursive = false } = opts || {};
-
 		const node = this.nodes[nodeID];
 		if (!node) {
 			throw new Error(`No node found with id ${nodeID}`);
@@ -416,8 +276,6 @@ export class Graph {
 			//Ensure we update the version
 			[annotatedVersion]: VERSION
 		};
-		//Make sure the playing state is not serialized. This would likely cause issues
-		delete annotations[annotatedPlayState];
 
 		const serialized = {
 			nodes: Object.values(this.nodes).map(x => x.serialize()),
@@ -451,8 +309,11 @@ export class Graph {
 
 	/**
 	 * Creates a graph from a serialized graph. Note that the types of the nodes must be present in the lookup.
-	 * @param input
-	 * @param lookup
+	 * @example
+	 * ```typescript
+	 * //You should always create a fresh graph when deserializing to avoid side effects
+	 * const graph = new Graph().deserialize(serialized, lookup);
+	 * ```
 	 */
 	async deserialize(
 		serialized: SerializedGraph,
@@ -470,11 +331,6 @@ export class Graph {
 		}
 
 		this.annotations = serialized.annotations;
-		//Check that all capabilities are present
-
-		//Look for annotations that mention capabilities and check that a key is present.
-		//We assume that the capabilities have already been loaded
-		this.checkCapabilitites(this.annotations);
 
 		//Life cycle
 		// 1 - Create the nodes
@@ -510,12 +366,14 @@ export class Graph {
 				throw new Error(`No target node found with id ${theEdge.target}`);
 			}
 
+			//TODO remove this. This is awful to have to try fix after the fact
 			if (!source.outputs[theEdge.sourceHandle]) {
 				//This must be a dynamic output. We create a new one with any type as its likely dependent on runtime anyway
-				source.addOutput(theEdge.sourceHandle, {
+				(source as DataflowNode).dataflow.addOutput(theEdge.sourceHandle, {
 					type: AnySchema
 				});
 			}
+
 			if (!target.inputs[theEdge.targetHandle]) {
 				throw new Error(
 					`No input found on target node ${target.id} with handle ${theEdge.targetHandle}`
@@ -532,6 +390,7 @@ export class Graph {
 	}
 
 	registerCapability(factory: CapabilityFactory) {
+		this.registeredCapabilities.push(factory);
 		const value = factory.register(this);
 		this.capabilities[factory.name] = value;
 		//Make it obvious that this capability is present on the serialized graph
@@ -541,9 +400,20 @@ export class Graph {
 
 	clone(): Graph {
 		const clonedGraph = new Graph();
-		clonedGraph.externalLoader = this.externalLoader;
+
+		clonedGraph.annotations = {
+			...toJS(this.annotations),
+			//Create a new id to prevent collisions
+			[annotatedId]: uuid()
+		};
+
 		const oldToNewIdMap = new Map<string, string>();
 
+		// Clone capabilities
+		this.registeredCapabilities.forEach(value => {
+			clonedGraph.registerCapability(value);
+		});
+
 		// Clone nodes
 		this.forEachNode(node => {
 			const clonedNode = node.clone(clonedGraph);
@@ -588,149 +458,45 @@ export class Graph {
 	}
 
 	/**
-	 * Starts the graph in network mode
-	 * TODO Complete
-	 */
-	start = () => {
-		this.annotations[annotatedPlayState] = 'playing';
-		this.emit('start', {});
-		//Trigger the start of all the nodes
-		this.forEachNode(node => node.onStart());
-	};
-	/**
-	 * Stops the graph in network mode
-	 */
-	stop = () => {
-		this.annotations[annotatedPlayState] = 'stopped';
-		this.emit('stop', {});
-		//Trigger the start of all the nodes
-		this.forEachNode(node => node.onStop());
-	};
-
-	pause = () => {
-		this.annotations[annotatedPlayState] = 'paused';
-		this.emit('pause', {});
-		//Trigger the start of all the nodes
-		this.forEachNode(node => node.onPause());
-	};
-	resume = () => {
-		this.annotations[annotatedPlayState] = 'playing';
-		this.emit('resume', {});
-		//Trigger the start of all the nodes
-		this.forEachNode(node => node.onResume());
-	};
-
-	/**
-	 * Triggers a message on the graph
-	 * TODO Complete
-	 * @param eventName
-	 * @param data
-	 * @param origin
-	 */
-	trigger = (eventName: string, data: any, origin: Node) => {
-		//Add to the message queue
-		this.messageQueue.push({
-			eventName,
-			data,
-			origin
-		});
-	};
-
-	/**
-	 * Executes the graph as a single batch. This will execute all the nodes in the graph and return the output of the output node
-	 * @param opts
-	 * @throws {BatchRunError}
+	 * Connects two nodes together. If the target is variadic, it will automatically add the index to the edge data if not provided
+	 * @param source
+	 * @param sourceHandle
+	 * @param target
+	 * @param targetHandle
+	 * @param variadicIndex
 	 * @returns
 	 */
-	async execute(opts?: GraphExecuteOptions): Promise<BatchExecution> {
-		const { inputs, stats } = opts || {};
-
-		const start = performance.now();
-		const statsTracker = {};
-
-		if (inputs) {
-			const input = Object.values(this.nodes).find(
-				x => x.factory.type === 'studio.tokens.generic.input'
-			);
-			if (opts?.strict && !input) {
-				throw new Error('No input node found');
-			}
-
-			//Set the inputs for execution
-			Object.entries(inputs).forEach(([key, value]) => {
-				const opts: ISetValue = {
-					//We are controlling propagation
-					noPropagate: true
-				};
-				//Only necessary if there is dynamic typing involved
-				if (value.type) {
-					opts.type = value.type;
-				}
-
-				//Its possible that there is no input with the name
-				input?.inputs[key]?.setValue(value.value, opts);
-			});
-		}
-
-		//Perform a topological sort
-
-		const topologic = topologicalSort(this);
-		//This stores intermediate states during execution
-		for (let i = 0, c = topologic.length; i < c; i++) {
-			const nodeId = topologic[i];
-
-			const node = this.getNode(nodeId);
-
-			// Might happen with graphs that have not cleaned up their edges to nowhere
-			if (!node) {
-				continue;
-			}
-			//Execute the node
-			const res = await node.run();
-			if (res.error) {
-				//@ts-ignore
-				(res.error as BatchRunError).nodeId = nodeId;
-				throw res.error;
-			}
-
-			if (stats) {
-				statsTracker[nodeId] = res;
-			}
-
-			//Propagate the values
-			this.propagate(nodeId, true);
+	connect(
+		source: Node,
+		sourceHandle: Port,
+		target: Node,
+		targetHandle: Port,
+		variadicIndex: number = -1
+	): Edge {
+		//If its variadic we need to check the existing edges
+		let annotations = {};
+		if (targetHandle.variadic) {
+			const edges = this.inEdges(target.id, targetHandle.name);
+			//The number of edges is the new index
+			annotations = {
+				[annotatedVariadicIndex]:
+					variadicIndex == -1 ? edges.length : variadicIndex
+			} as VariadicEdgeData;
 		}
-
-		let output: BatchExecution['output'] = undefined;
-
-		//Get the output node
-		const outputNode = Object.values(this.nodes).find(
-			x => x.factory.type === 'studio.tokens.generic.output'
-		);
-
-		if (outputNode) {
-			//Output has a dynamic amount of ports, so emit a single object with each of them
-			output = Object.fromEntries(
-				Object.entries(outputNode.inputs).map(([key, value]) => {
-					return [
-						key,
-						{
-							value: value.value,
-							type: value.type
-						}
-					];
-				})
+		//Check to see if there is already a connection on the target
+		if (targetHandle._edges.length > 0 && !targetHandle.variadic) {
+			throw new Error(
+				`Input ${targetHandle.name} on node ${target.id} is already connected`
 			);
 		}
-
-		const end = performance.now();
-		return {
-			order: topologic,
-			stats: statsTracker,
-			start,
-			end,
-			output
-		};
+		return this.createEdge({
+			id: uuid(),
+			source: source.id,
+			target: target.id,
+			sourceHandle: sourceHandle.name,
+			targetHandle: targetHandle.name,
+			annotations
+		});
 	}
 
 	/**
@@ -924,22 +690,9 @@ export class Graph {
 		//Then update the connection on the ports
 		targetPort._edges.push(edge);
 
-		if (targetPort.variadic) {
-			//Extend the variadic array
-			targetPort.setValue((targetPort.value || []).concat([sourcePort.value]), {
-				//TODO
-				// Note that this is a quick fix and that we should probably restrict the update of the typing so that it cannot be overriden later
-				type: {
-					type: 'array',
-					items: sourcePort.type
-				}
-			});
-		}
-
 		sourcePort?._edges.push(edge);
-		this.emit('edgeAdded', edge);
-		this.propagate(source);
-		return edge;
+		this.emit('edgeAdded', finalEdge);
+		return finalEdge;
 	}
 	/**
 	 * Return all edges that point into the nodes inputs.
diff --git a/packages/graph-engine/src/index.ts b/packages/graph-engine/src/index.ts
index 7f31f2c86..1630dbb27 100644
--- a/packages/graph-engine/src/index.ts
+++ b/packages/graph-engine/src/index.ts
@@ -7,3 +7,17 @@ export * from './schemas/index.js';
 export * from './annotations/index.js';
 export * from './graph/interfaces.js';
 export * from './nodes/color/lib/utils.js';
+
+//Nodes
+export * from './programmatic/nodes/dataflow.js';
+export * from './programmatic/nodes/controlflow.js';
+
+//Ports
+export * from './programmatic/dataflow/base.js';
+export * from './programmatic/controlflow/base.js';
+
+//Capabilities
+export * from './capabilities/controlFlow.js';
+export * from './capabilities/dataflow.js';
+export * from './capabilities/interface.js';
+export * from './capabilities/secret.js';
diff --git a/packages/graph-engine/src/nodes/accessibility/colorBlindness.ts b/packages/graph-engine/src/nodes/accessibility/colorBlindness.ts
index 39d46d746..088d05e0e 100644
--- a/packages/graph-engine/src/nodes/accessibility/colorBlindness.ts
+++ b/packages/graph-engine/src/nodes/accessibility/colorBlindness.ts
@@ -8,7 +8,7 @@ import {
 	toHex
 } from '../../index.js';
 import { ColorSchema, StringSchema } from '../../schemas/index.js';
-import { Node } from '../../programmatic/node.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import blinder from 'color-blind-esm';
 
 export enum ColorBlindnessTypes {
@@ -25,7 +25,7 @@ export enum ColorBlindnessTypes {
 /**
  * Converts provided colors to the colors as perceived by the specified color blindness type.
  */
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Color Blindness';
 	static type = 'studio.tokens.accessibility.colorBlindness';
 	static description =
@@ -45,7 +45,7 @@ export default class NodeDefinition extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('color', {
+		this.dataflow.addInput('color', {
 			type: {
 				...ColorSchema,
 				default: {
@@ -54,7 +54,7 @@ export default class NodeDefinition extends Node {
 				}
 			}
 		});
-		this.addInput('type', {
+		this.dataflow.addInput('type', {
 			type: {
 				...StringSchema,
 				title: 'Color Blindness Type',
@@ -63,7 +63,7 @@ export default class NodeDefinition extends Node {
 			}
 		});
 
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: ColorSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/array/arraySubgraph.ts b/packages/graph-engine/src/nodes/array/arraySubgraph.ts
index ca964363e..89c5290db 100644
--- a/packages/graph-engine/src/nodes/array/arraySubgraph.ts
+++ b/packages/graph-engine/src/nodes/array/arraySubgraph.ts
@@ -4,8 +4,9 @@ import {
 	NumberSchema,
 	SchemaObject
 } from '../../schemas/index.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { Graph } from '../../graph/graph.js';
-import { INodeDefinition, Node } from '../../programmatic/node.js';
+import { INodeDefinition } from '../../programmatic/nodes/node.js';
 import { Input, ToInput, ToOutput } from '../../programmatic/index.js';
 import {
 	annotatedDeleteable,
@@ -14,6 +15,7 @@ import {
 } from '../../annotations/index.js';
 import { arrayOf, extractArray } from '../../schemas/utils.js';
 import { autorun } from 'mobx';
+import { injectCapabilities } from '@/utils/graph.js';
 import InputNode from '../generic/input.js';
 import OutputNode from '../generic/output.js';
 
@@ -21,8 +23,8 @@ export interface IArraySubgraph extends INodeDefinition {
 	innerGraph?: Graph;
 }
 
-export default class ArraySubgraph<T, V> extends Node {
-	static title = 'Array Map';
+export default class ArraySubgraph<T, V> extends DataflowNode {
+	static title = 'Array Map (iterate over list) ';
 	static type = 'tokens.studio.array.map';
 	static description =
 		"Execute a graph for every item in an Array (list of items). The output is an array of the same length as the input array. The inner graph is executed for each item in the array (list). The inner graph automatically has an input node with the name 'value' and an output node with the name 'value' as well. The inner graph also has an input node with the name 'index' and an input node with the name 'length' to get the current index and length of the array.";
@@ -46,7 +48,7 @@ export default class ArraySubgraph<T, V> extends Node {
 
 		if (!existing) {
 			//Pass capabilities down
-			this._innerGraph.capabilities = this.getGraph().capabilities;
+			injectCapabilities(this.getGraph(), this._innerGraph);
 
 			input = new InputNode({ graph: this._innerGraph });
 			input.annotations[annotatedDeleteable] = false;
@@ -114,7 +116,7 @@ export default class ArraySubgraph<T, V> extends Node {
 				//If the key doesn't exist in the existing inputs, add it
 				if (!existing[key] && !value.annotations[hideFromParentSubgraph]) {
 					//Always add it as visible
-					this.addInput(key, {
+					this.dataflow.addInput(key, {
 						type: value.type,
 						visible: true
 					});
@@ -141,14 +143,14 @@ export default class ArraySubgraph<T, V> extends Node {
 			});
 		});
 
-		this.addInput('array', {
+		this.dataflow.addInput('array', {
 			type: AnyArraySchema,
 			visible: true
 		});
 
 		this.inputs['array'].annotations['ui.editable'] = false;
 
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: AnyArraySchema,
 			visible: true
 		});
diff --git a/packages/graph-engine/src/nodes/array/arrify.ts b/packages/graph-engine/src/nodes/array/arrify.ts
index 8a777a412..b33e4da67 100644
--- a/packages/graph-engine/src/nodes/array/arrify.ts
+++ b/packages/graph-engine/src/nodes/array/arrify.ts
@@ -3,9 +3,10 @@ import {
 	AnySchema,
 	createVariadicSchema
 } from '../../schemas/index.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
-export default class NodeDefinition<T> extends Node {
+
+export default class NodeDefinition<T> extends DataflowNode {
 	static title = 'Arrify';
 	static type = 'studio.tokens.array.arrify';
 	static description =
@@ -20,14 +21,14 @@ export default class NodeDefinition<T> extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('items', {
+		this.dataflow.addInput('items', {
 			type: {
 				...createVariadicSchema(AnySchema),
 				default: []
 			},
 			variadic: true
 		});
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: AnyArraySchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/array/concat.ts b/packages/graph-engine/src/nodes/array/concat.ts
index 3667d12b5..9673318d3 100644
--- a/packages/graph-engine/src/nodes/array/concat.ts
+++ b/packages/graph-engine/src/nodes/array/concat.ts
@@ -1,7 +1,8 @@
 import { AnyArraySchema } from '../../schemas/index.js';
-import { INodeDefinition, Node } from '../../programmatic/node.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
+import { INodeDefinition } from '../../programmatic/nodes/node.js';
 import { ToInput, ToOutput } from '../../programmatic/index.js';
-export default class NodeDefinition<T> extends Node {
+export default class NodeDefinition<T> extends DataflowNode {
 	static title = 'Concat Array';
 	static type = 'studio.tokens.array.concat';
 	declare inputs: ToInput<{
@@ -16,13 +17,13 @@ export default class NodeDefinition<T> extends Node {
 	static description = 'Performs an array join using a string delimiter';
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('a', {
+		this.dataflow.addInput('a', {
 			type: AnyArraySchema
 		});
-		this.addInput('b', {
+		this.dataflow.addInput('b', {
 			type: AnyArraySchema
 		});
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: AnyArraySchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/array/filter.ts b/packages/graph-engine/src/nodes/array/filter.ts
index c574fbd92..1a0ee11ea 100644
--- a/packages/graph-engine/src/nodes/array/filter.ts
+++ b/packages/graph-engine/src/nodes/array/filter.ts
@@ -4,8 +4,9 @@ import {
 	BooleanSchema,
 	NumberSchema
 } from '../../schemas/index.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { Graph } from '../../graph/graph.js';
-import { INodeDefinition, Node } from '../../programmatic/node.js';
+import { INodeDefinition } from '../../programmatic/nodes/node.js';
 import { Input, ToInput, ToOutput } from '../../programmatic/index.js';
 import {
 	annotatedDeleteable,
@@ -14,6 +15,7 @@ import {
 } from '../../annotations/index.js';
 import { autorun } from 'mobx';
 import { extractArray } from '../../schemas/utils.js';
+import { injectCapabilities } from '@/utils/graph.js';
 import InputNode from '../generic/input.js';
 import OutputNode from '../generic/output.js';
 
@@ -21,7 +23,7 @@ export interface IArraySubgraph extends INodeDefinition {
 	innerGraph?: Graph;
 }
 
-export default class ArraySubgraph<T> extends Node {
+export default class ArraySubgraph<T> extends DataflowNode {
 	static title = 'Array filter';
 	static type = 'tokens.studio.array.filter';
 	static description =
@@ -47,7 +49,8 @@ export default class ArraySubgraph<T> extends Node {
 
 		if (!existing) {
 			//Pass capabilities down
-			this._innerGraph.capabilities = this.getGraph().capabilities;
+			//Pass capabilities down
+			injectCapabilities(this.getGraph(), this._innerGraph);
 
 			input = new InputNode({ graph: this._innerGraph });
 			input.annotations[annotatedDeleteable] = false;
@@ -112,7 +115,7 @@ export default class ArraySubgraph<T> extends Node {
 				//If the key doesn't exist in the existing inputs, add it
 				if (!existing[key] && !value.annotations[hideFromParentSubgraph]) {
 					//Always add it as visible
-					this.addInput(key, {
+					this.dataflow.addInput(key, {
 						type: value.type,
 						visible: true
 					});
@@ -139,14 +142,14 @@ export default class ArraySubgraph<T> extends Node {
 			});
 		});
 
-		this.addInput('array', {
+		this.dataflow.addInput('array', {
 			type: AnyArraySchema,
 			visible: true
 		});
 
 		this.inputs['array'].annotations['ui.editable'] = false;
 
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: AnyArraySchema,
 			visible: true
 		});
diff --git a/packages/graph-engine/src/nodes/array/find.ts b/packages/graph-engine/src/nodes/array/find.ts
index 5809a95c3..2c9f43a8a 100644
--- a/packages/graph-engine/src/nodes/array/find.ts
+++ b/packages/graph-engine/src/nodes/array/find.ts
@@ -14,6 +14,7 @@ import {
 } from '../../annotations/index.js';
 import { autorun } from 'mobx';
 import { extractArray } from '../../schemas/utils.js';
+import { injectCapabilities } from '@/utils/graph.js';
 import InputNode from '../generic/input.js';
 import OutputNode from '../generic/output.js';
 
@@ -50,7 +51,7 @@ export default class ArraySubgraph<T extends undefined> extends Node {
 
 		if (!existing) {
 			//Pass capabilities down
-			this._innerGraph.capabilities = this.getGraph().capabilities;
+			injectCapabilities(this.getGraph(), this._innerGraph);
 
 			input = new InputNode({ graph: this._innerGraph });
 			input.annotations[annotatedDeleteable] = false;
@@ -115,7 +116,7 @@ export default class ArraySubgraph<T extends undefined> extends Node {
 				//If the key doesn't exist in the existing inputs, add it
 				if (!existing[key] && !value.annotations[hideFromParentSubgraph]) {
 					//Always add it as visible
-					this.addInput(key, {
+					this.dataflow.addInput(key, {
 						type: value.type,
 						visible: true
 					});
@@ -142,24 +143,24 @@ export default class ArraySubgraph<T extends undefined> extends Node {
 			});
 		});
 
-		this.addInput('array', {
+		this.dataflow.addInput('array', {
 			type: AnyArraySchema,
 			visible: true
 		});
 
 		this.inputs['array'].annotations['ui.editable'] = false;
 
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: AnyArraySchema,
 			visible: true
 		});
 
-		this.addOutput('index', {
+		this.dataflow.addOutput('index', {
 			type: NumberSchema,
 			visible: true
 		});
 
-		this.addOutput('found', {
+		this.dataflow.addOutput('found', {
 			type: BooleanSchema,
 			visible: true
 		});
diff --git a/packages/graph-engine/src/nodes/array/flatten.ts b/packages/graph-engine/src/nodes/array/flatten.ts
index 2c9b3bf6a..dd9b18d95 100644
--- a/packages/graph-engine/src/nodes/array/flatten.ts
+++ b/packages/graph-engine/src/nodes/array/flatten.ts
@@ -1,7 +1,7 @@
 import { AnyArraySchema } from '../../schemas/index.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
-export default class NodeDefinition<T> extends Node {
+export default class NodeDefinition<T> extends DataflowNode {
 	static title = 'Array flatten';
 	static type = 'studio.tokens.array.flatten';
 	static description = 'Flattens an array of arrays into a single array.';
@@ -21,10 +21,10 @@ export default class NodeDefinition<T> extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('array', {
+		this.dataflow.addInput('array', {
 			type: AnyArraySchema
 		});
-		this.addOutput('array', {
+		this.dataflow.addOutput('array', {
 			type: AnyArraySchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/array/indexArray.ts b/packages/graph-engine/src/nodes/array/indexArray.ts
index 40e2945d2..56dd9ad71 100644
--- a/packages/graph-engine/src/nodes/array/indexArray.ts
+++ b/packages/graph-engine/src/nodes/array/indexArray.ts
@@ -3,10 +3,10 @@ import {
 	AnySchema,
 	NumberSchema
 } from '../../schemas/index.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 import { SchemaObject } from 'ajv';
-export default class NodeDefinition<T> extends Node {
+export default class NodeDefinition<T> extends DataflowNode {
 	static title = 'Index Array';
 	static type = 'studio.tokens.array.index';
 	static description = 'Extracts a value from an array at a given index. ';
@@ -31,17 +31,17 @@ export default class NodeDefinition<T> extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('array', {
+		this.dataflow.addInput('array', {
 			type: AnyArraySchema
 		});
-		this.addInput('index', {
+		this.dataflow.addInput('index', {
 			type: {
 				...NumberSchema,
 				default: 0
 			}
 		});
 
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: AnySchema
 		});
 	}
@@ -50,7 +50,7 @@ export default class NodeDefinition<T> extends Node {
 		const array = this.inputs.array;
 		const { index } = this.getAllInputs();
 		//Get the value
-		const calculated = array.value.at(index)!;
+		const calculated = array.value[index];
 		//Extract the type
 		//We assume that the array has a single defined item
 
diff --git a/packages/graph-engine/src/nodes/array/push.ts b/packages/graph-engine/src/nodes/array/push.ts
index 019943ab6..143422b25 100644
--- a/packages/graph-engine/src/nodes/array/push.ts
+++ b/packages/graph-engine/src/nodes/array/push.ts
@@ -1,7 +1,7 @@
 import { AnyArraySchema, AnySchema } from '../../schemas/index.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
-export default class NodeDefinition<T> extends Node {
+export default class NodeDefinition<T> extends DataflowNode {
 	static title = 'Array push';
 	static type = 'studio.tokens.array.push';
 	static description = 'Pushes an item to an array and returns the new array.';
@@ -25,13 +25,13 @@ export default class NodeDefinition<T> extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('array', {
+		this.dataflow.addInput('array', {
 			type: AnyArraySchema
 		});
-		this.addInput('item', {
+		this.dataflow.addInput('item', {
 			type: AnySchema
 		});
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: AnyArraySchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/array/reverse.ts b/packages/graph-engine/src/nodes/array/reverse.ts
index ceccf957d..a396bddb2 100644
--- a/packages/graph-engine/src/nodes/array/reverse.ts
+++ b/packages/graph-engine/src/nodes/array/reverse.ts
@@ -1,7 +1,7 @@
 import { AnyArraySchema } from '../../schemas/index.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
-export default class NodeDefinition<T> extends Node {
+export default class NodeDefinition<T> extends DataflowNode {
 	static title = 'Reverse Array';
 	static type = 'studio.tokens.array.reverse';
 	static description = 'Reverses a given array without mutating the original';
@@ -15,10 +15,10 @@ export default class NodeDefinition<T> extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('array', {
+		this.dataflow.addInput('array', {
 			type: AnyArraySchema
 		});
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: AnyArraySchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/array/slice.ts b/packages/graph-engine/src/nodes/array/slice.ts
index f390854cc..a98111302 100644
--- a/packages/graph-engine/src/nodes/array/slice.ts
+++ b/packages/graph-engine/src/nodes/array/slice.ts
@@ -1,7 +1,7 @@
 import { AnyArraySchema, NumberSchema } from '../../schemas/index.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
-export default class NodeDefinition<T> extends Node {
+export default class NodeDefinition<T> extends DataflowNode {
 	static title = 'Slice Array';
 	static type = 'studio.tokens.array.slice';
 	static description = 'Slices an input array';
@@ -16,16 +16,16 @@ export default class NodeDefinition<T> extends Node {
 	}>;
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('array', {
+		this.dataflow.addInput('array', {
 			type: AnyArraySchema
 		});
-		this.addInput('start', {
+		this.dataflow.addInput('start', {
 			type: NumberSchema
 		});
-		this.addInput('end', {
+		this.dataflow.addInput('end', {
 			type: NumberSchema
 		});
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: AnyArraySchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/array/sort.ts b/packages/graph-engine/src/nodes/array/sort.ts
index afc9cb723..aeb99eb3d 100644
--- a/packages/graph-engine/src/nodes/array/sort.ts
+++ b/packages/graph-engine/src/nodes/array/sort.ts
@@ -1,5 +1,6 @@
 import { AnyArraySchema, StringSchema } from '../../schemas/index.js';
-import { INodeDefinition, Node } from '../../programmatic/node.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
+import { INodeDefinition } from '../../programmatic/nodes/node.js';
 import { ToInput, ToOutput } from '../../programmatic/index.js';
 import { orderBy } from 'lodash-es';
 
@@ -17,7 +18,7 @@ export type NamedInput = {
 export const defaults = {
 	order: Order.ASC
 };
-export default class NodeDefinition<T> extends Node {
+export default class NodeDefinition<T> extends DataflowNode {
 	static title = 'Sort Array';
 	static type = 'studio.tokens.array.sort';
 
@@ -34,20 +35,20 @@ export default class NodeDefinition<T> extends Node {
 	static description = 'Sorts an array';
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('array', {
+		this.dataflow.addInput('array', {
 			type: AnyArraySchema
 		});
-		this.addInput('order', {
+		this.dataflow.addInput('order', {
 			type: {
 				...StringSchema,
 				enum: [Order.ASC, Order.DESC],
 				default: Order.ASC
 			}
 		});
-		this.addInput('sortBy', {
+		this.dataflow.addInput('sortBy', {
 			type: StringSchema
 		});
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: AnyArraySchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/color/colorToString.ts b/packages/graph-engine/src/nodes/color/colorToString.ts
index 2ccebeca5..445c77502 100644
--- a/packages/graph-engine/src/nodes/color/colorToString.ts
+++ b/packages/graph-engine/src/nodes/color/colorToString.ts
@@ -1,18 +1,17 @@
 import { Black, toColor } from './lib/utils.js';
+import { Color } from '../../types.js';
 import { ColorSchema, StringSchema } from '../../schemas/index.js';
-import { type ColorSpace, ColorSpaces } from './lib/spaces.js';
-import { Color as ColorType } from '../../types.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Color to string';
 	static type = 'studio.tokens.color.colorToString';
 	static description = 'Converts a color to a string';
 
 	declare inputs: ToInput<{
-		color: ColorType;
-		space: ColorSpace | 'hex';
+		color: Color;
+		space: 'srgb' | 'hsl' | 'hex';
 	}>;
 	declare outputs: ToOutput<{
 		value: string;
@@ -20,20 +19,21 @@ export default class NodeDefinition extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('color', {
+		this.dataflow.addInput('color', {
 			type: {
 				...ColorSchema,
 				default: Black
 			}
 		});
-		this.addInput('space', {
+		this.dataflow.addInput('space', {
 			type: {
 				...StringSchema,
-				enum: ['hex', ...ColorSpaces],
+				enum: ['srgb', 'hsl', 'hex'],
 				default: 'hex'
-			}
+			},
+			visible: false
 		});
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: StringSchema
 		});
 	}
@@ -42,8 +42,8 @@ export default class NodeDefinition extends Node {
 		// eslint-disable-next-line prefer-const
 		const { color, space } = this.getAllInputs();
 
-		let adjustedSpace: string = space as string;
-		let format: { format: string } | undefined = undefined;
+		let adjustedSpace: string = space;
+		let format = undefined;
 
 		if (space == 'hex') {
 			adjustedSpace = 'srgb';
diff --git a/packages/graph-engine/src/nodes/color/contrast.ts b/packages/graph-engine/src/nodes/color/contrast.ts
index bbb4654f8..8e53812c4 100644
--- a/packages/graph-engine/src/nodes/color/contrast.ts
+++ b/packages/graph-engine/src/nodes/color/contrast.ts
@@ -5,44 +5,44 @@ import {
 	StringSchema
 } from '../../schemas/index.js';
 import { ContrastAlgorithm } from '../../types/index.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 import { toColor } from './lib/utils.js';
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Contrast';
 	static type = 'studio.tokens.color.contrast';
 	static description =
 		'Calculates the contrast between two color values. The output is a number representing the contrast ratio between the two colors. The higher the number, the higher the contrast between the two colors. The output is based on the APCA-W3 contrast calculation.';
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('a', {
+		this.dataflow.addInput('a', {
 			type: {
 				...ColorSchema,
 				default: '#000000'
 			}
 		});
-		this.addInput('b', {
+		this.dataflow.addInput('b', {
 			type: {
 				...ColorSchema,
 				default: '#ffffff'
 			}
 		});
-		this.addInput('algorithm', {
+		this.dataflow.addInput('algorithm', {
 			type: {
 				...StringSchema,
 				enum: Object.values(ContrastAlgorithm),
 				default: ContrastAlgorithm.APCA
 			}
 		});
-		this.addInput('absolute', {
+		this.dataflow.addInput('absolute', {
 			type: {
 				...BooleanSchema,
 				default: false
 			}
 		});
 
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: NumberSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/color/contrasting.ts b/packages/graph-engine/src/nodes/color/contrasting.ts
index 4c0281442..fdd42f30a 100644
--- a/packages/graph-engine/src/nodes/color/contrasting.ts
+++ b/packages/graph-engine/src/nodes/color/contrasting.ts
@@ -7,13 +7,14 @@ import {
 } from '../../schemas/index.js';
 import { Color as ColorType } from '../../types.js';
 import { ContrastAlgorithm } from '../../types/index.js';
-import { INodeDefinition, Node } from '../../programmatic/node.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
+import { INodeDefinition } from '../../programmatic/nodes/node.js';
 import { ToInput, ToOutput } from '../../programmatic/index.js';
 
 /**
  * Performs a contrast calculation between two colors using APCA-W3 calcs
  */
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Contrasting Color';
 	static type = 'studio.tokens.color.contrasting';
 	static description =
@@ -34,46 +35,46 @@ export default class NodeDefinition extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('a', {
+		this.dataflow.addInput('a', {
 			type: {
 				...ColorSchema,
 				default: White
 			}
 		});
-		this.addInput('b', {
+		this.dataflow.addInput('b', {
 			type: {
 				...ColorSchema,
 				default: Black
 			}
 		});
-		this.addInput('background', {
+		this.dataflow.addInput('background', {
 			type: {
 				...ColorSchema,
 				default: White
 			}
 		});
 
-		this.addInput('algorithm', {
+		this.dataflow.addInput('algorithm', {
 			type: {
 				...StringSchema,
 				enum: Object.values(ContrastAlgorithm),
 				default: ContrastAlgorithm.APCA
 			}
 		});
-		this.addInput('threshold', {
+		this.dataflow.addInput('threshold', {
 			type: {
 				...NumberSchema,
 				default: 60
 			}
 		});
 
-		this.addOutput('sufficient', {
+		this.dataflow.addOutput('sufficient', {
 			type: BooleanSchema
 		});
-		this.addOutput('color', {
+		this.dataflow.addOutput('color', {
 			type: ColorSchema
 		});
-		this.addOutput('contrast', {
+		this.dataflow.addOutput('contrast', {
 			type: NumberSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/color/contrastingAlpha.ts b/packages/graph-engine/src/nodes/color/contrastingAlpha.ts
index 4e534f67d..42b44004b 100644
--- a/packages/graph-engine/src/nodes/color/contrastingAlpha.ts
+++ b/packages/graph-engine/src/nodes/color/contrastingAlpha.ts
@@ -6,9 +6,9 @@ import {
 } from '../../schemas/index.js';
 import { Color as ColorType, ContrastAlgorithmType } from '../../types.js';
 import { ContrastAlgorithm } from '../../types/index.js';
-import { INodeDefinition, Node } from '../../programmatic/node.js';
-import { ToInput } from '@/programmatic/input.js';
-import { ToOutput } from '@/programmatic/output.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
+import { INodeDefinition } from '../../programmatic/nodes/node.js';
+import { ToInput, ToOutput } from '@/programmatic/index.js';
 import { flattenAlpha } from './lib/flattenAlpha.js';
 import Color from 'colorjs.io';
 
@@ -20,7 +20,7 @@ export const contrastCheck = (
 	return Math.abs(foreground.contrast(background, algorithm));
 };
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Contrasting Alpha';
 	static type = 'studio.tokens.color.contrastingAlpha';
 	static description = 'Reduce alpha until you are close to the threshold.';
@@ -42,32 +42,32 @@ export default class NodeDefinition extends Node {
 		super(props);
 
 		// Inputs
-		this.addInput('foreground', {
+		this.dataflow.addInput('foreground', {
 			type: {
 				...ColorSchema,
 				default: Black
 			}
 		});
-		this.addInput('background', {
+		this.dataflow.addInput('background', {
 			type: {
 				...ColorSchema,
 				default: White
 			}
 		});
-		this.addInput('algorithm', {
+		this.dataflow.addInput('algorithm', {
 			type: {
 				...StringSchema,
 				enum: Object.values(ContrastAlgorithm),
 				default: ContrastAlgorithm.APCA
 			}
 		});
-		this.addInput('threshold', {
+		this.dataflow.addInput('threshold', {
 			type: {
 				...NumberSchema,
 				default: 60
 			}
 		});
-		this.addInput('precision', {
+		this.dataflow.addInput('precision', {
 			type: {
 				...NumberSchema,
 				default: 5
@@ -75,13 +75,13 @@ export default class NodeDefinition extends Node {
 		});
 
 		// Outputs
-		this.addOutput('alpha', {
+		this.dataflow.addOutput('alpha', {
 			type: NumberSchema
 		});
-		this.addOutput('color', {
+		this.dataflow.addOutput('color', {
 			type: ColorSchema
 		});
-		this.addOutput('contrast', {
+		this.dataflow.addOutput('contrast', {
 			type: NumberSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/color/convert.ts b/packages/graph-engine/src/nodes/color/convert.ts
index 2843496a0..34972fabf 100644
--- a/packages/graph-engine/src/nodes/color/convert.ts
+++ b/packages/graph-engine/src/nodes/color/convert.ts
@@ -1,11 +1,11 @@
 import { Color } from '../../types.js';
 import { ColorSchema, StringSchema } from '../../schemas/index.js';
-import { ColorSpace, ColorSpaces } from './lib/spaces.js';
+import { ColorSpace, colorSpaces } from './lib/types.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 import { toColor, toColorObject } from './lib/utils.js';
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Convert Color';
 	static type = 'studio.tokens.color.convert';
 	static description = 'Transforms a color from one space to another';
@@ -20,17 +20,17 @@ export default class NodeDefinition extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('color', {
+		this.dataflow.addInput('color', {
 			type: ColorSchema
 		});
-		this.addInput('space', {
+		this.dataflow.addInput('space', {
 			type: {
 				...StringSchema,
-				enum: ColorSpaces,
+				enum: colorSpaces,
 				default: 'srgb'
 			}
 		});
-		this.addOutput('color', {
+		this.dataflow.addOutput('color', {
 			type: ColorSchema
 		});
 	}
@@ -38,7 +38,7 @@ export default class NodeDefinition extends Node {
 	execute(): void | Promise<void> {
 		const { color, space } = this.getAllInputs();
 
-		if (!ColorSpaces.includes(space)) {
+		if (!colorSpaces.includes(space)) {
 			throw new Error('Invalid color space ' + space);
 		}
 
diff --git a/packages/graph-engine/src/nodes/color/create.ts b/packages/graph-engine/src/nodes/color/create.ts
index 3f9cf9101..9fd94726f 100644
--- a/packages/graph-engine/src/nodes/color/create.ts
+++ b/packages/graph-engine/src/nodes/color/create.ts
@@ -4,12 +4,12 @@ import {
 	NumberSchema,
 	StringSchema
 } from '../../schemas/index.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 export { ColorModifierTypes } from '@tokens-studio/types';
-import { ColorSpace, ColorSpaces } from './lib/spaces.js';
+import { ColorSpace, colorSpaces } from './lib/types.js';
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Create Color';
 	static type = 'studio.tokens.color.create';
 	static description =
@@ -44,26 +44,26 @@ export default class NodeDefinition extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('space', {
+		this.dataflow.addInput('space', {
 			type: {
 				...StringSchema,
-				enum: ColorSpaces,
+				enum: colorSpaces,
 				default: 'srgb'
 			}
 		});
-		this.addInput('a', {
+		this.dataflow.addInput('a', {
 			type: {
 				...NumberSchema,
 				default: '0'
 			}
 		});
-		this.addInput('b', {
+		this.dataflow.addInput('b', {
 			type: {
 				...NumberSchema,
 				default: '0'
 			}
 		});
-		this.addInput('c', {
+		this.dataflow.addInput('c', {
 			type: {
 				...NumberSchema,
 				default: '0'
@@ -71,13 +71,13 @@ export default class NodeDefinition extends Node {
 		});
 
 		//No default on alpha as this might result in Hex8 colors which are not always desired
-		this.addInput('alpha', {
+		this.dataflow.addInput('alpha', {
 			type: {
 				...NumberSchema
 			}
 		});
 
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: ColorSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/color/darken.ts b/packages/graph-engine/src/nodes/color/darken.ts
index 7940b7a6c..76754f33d 100644
--- a/packages/graph-engine/src/nodes/color/darken.ts
+++ b/packages/graph-engine/src/nodes/color/darken.ts
@@ -1,10 +1,11 @@
 import { ColorSchema, NumberSchema } from '../../schemas/index.js';
+import { ColorSpace } from './lib/types.js';
 import { Color as ColorType } from '../../types.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 import { White, toColor, toColorObject } from './lib/utils.js';
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Darken Color';
 	static type = 'studio.tokens.color.darken';
 	static description = 'Darkens a color by a specified value';
@@ -12,6 +13,7 @@ export default class NodeDefinition extends Node {
 	declare inputs: ToInput<{
 		color: ColorType;
 		value: number;
+		space: ColorSpace;
 	}>;
 
 	declare outputs: ToOutput<{
@@ -20,13 +22,13 @@ export default class NodeDefinition extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('color', {
+		this.dataflow.addInput('color', {
 			type: {
 				...ColorSchema,
 				default: White
 			}
 		});
-		this.addInput('value', {
+		this.dataflow.addInput('value', {
 			type: {
 				...NumberSchema,
 				default: 0.5,
@@ -34,7 +36,7 @@ export default class NodeDefinition extends Node {
 			}
 		});
 
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: ColorSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/color/deconstruct.ts b/packages/graph-engine/src/nodes/color/deconstruct.ts
index 06dfa47a5..7ba056f24 100644
--- a/packages/graph-engine/src/nodes/color/deconstruct.ts
+++ b/packages/graph-engine/src/nodes/color/deconstruct.ts
@@ -4,11 +4,11 @@ import {
 	NumberSchema,
 	StringSchema
 } from '../../schemas/index.js';
-import { ColorSpace } from './lib/spaces.js';
+import { ColorSpace } from './lib/types.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 
-export default class DestructColorNode extends Node {
+export default class DestructColorNode extends DataflowNode {
 	static title = 'Deconstruct Color';
 	static type = 'studio.tokens.color.deconstruct';
 	static description =
@@ -46,23 +46,23 @@ export default class DestructColorNode extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('color', {
+		this.dataflow.addInput('color', {
 			type: ColorSchema
 		});
 
-		this.addOutput('space', {
+		this.dataflow.addOutput('space', {
 			type: StringSchema
 		});
-		this.addOutput('a', {
+		this.dataflow.addOutput('a', {
 			type: NumberSchema
 		});
-		this.addOutput('b', {
+		this.dataflow.addOutput('b', {
 			type: NumberSchema
 		});
-		this.addOutput('c', {
+		this.dataflow.addOutput('c', {
 			type: NumberSchema
 		});
-		this.addOutput('alpha', {
+		this.dataflow.addOutput('alpha', {
 			type: NumberSchema
 		});
 	}
@@ -75,17 +75,15 @@ export default class DestructColorNode extends Node {
 		}
 
 		this.outputs.space.set(color.space);
-
-		// Set channel values, defaulting to 0 if NaN
-		this.outputs.a.set(isNaN(color.channels[0]) ? 0 : color.channels[0]);
-		this.outputs.b.set(isNaN(color.channels[1]) ? 0 : color.channels[1]);
-		this.outputs.c.set(isNaN(color.channels[2]) ? 0 : color.channels[2]);
+		this.outputs.a.set(color.channels[0]);
+		this.outputs.b.set(color.channels[1]);
+		this.outputs.c.set(color.channels[2]);
 
 		// Only set alpha if it exists
 		if (color.alpha !== undefined) {
-			this.outputs.alpha!.set(color.alpha);
+			this.outputs.alpha.set(color.alpha);
 		} else {
-			this.outputs.alpha!.set(undefined);
+			this.outputs.alpha.set(undefined);
 		}
 	}
 }
diff --git a/packages/graph-engine/src/nodes/color/deltaE.ts b/packages/graph-engine/src/nodes/color/deltaE.ts
index d649c2a93..0bddb98a8 100644
--- a/packages/graph-engine/src/nodes/color/deltaE.ts
+++ b/packages/graph-engine/src/nodes/color/deltaE.ts
@@ -4,15 +4,15 @@ import {
 	NumberSchema,
 	StringSchema
 } from '../../schemas/index.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 import { setToPrecision } from '../../utils/precision.js';
 
 export const algorithms = ['76', 'CMC', '2000', 'Jz', 'ITP', 'OK'] as const;
 
 export type algorithm = (typeof algorithms)[number];
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Delta E (ΔE)';
 	static type = 'studio.tokens.color.deltaE';
 	static description =
@@ -20,25 +20,25 @@ export default class NodeDefinition extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('colorA', {
+		this.dataflow.addInput('colorA', {
 			type: {
 				...ColorSchema,
 				default: White
 			}
 		});
-		this.addInput('colorB', {
+		this.dataflow.addInput('colorB', {
 			type: {
 				...ColorSchema,
 				default: Black
 			}
 		});
-		this.addInput('precision', {
+		this.dataflow.addInput('precision', {
 			type: {
 				...NumberSchema,
 				default: 4
 			}
 		});
-		this.addInput('algorithm', {
+		this.dataflow.addInput('algorithm', {
 			type: {
 				...StringSchema,
 				enum: algorithms,
@@ -46,7 +46,7 @@ export default class NodeDefinition extends Node {
 			}
 		});
 
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: NumberSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/color/distance.ts b/packages/graph-engine/src/nodes/color/distance.ts
index c1020d862..10363dc11 100644
--- a/packages/graph-engine/src/nodes/color/distance.ts
+++ b/packages/graph-engine/src/nodes/color/distance.ts
@@ -5,15 +5,15 @@ import {
 	StringSchema
 } from '../../schemas/index.js';
 import { Color as ColorType } from '../../types.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 import { setToPrecision } from '../../utils/precision.js';
 
 export const colorSpaces = ['Lab', 'ICtCp', 'Jzazbz'] as const;
 
 export type ColorSpace = (typeof colorSpaces)[number];
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Distance';
 	static type = 'studio.tokens.color.distance';
 	static description =
@@ -22,35 +22,34 @@ export default class NodeDefinition extends Node {
 	declare inputs: ToInput<{
 		colorA: ColorType;
 		colorB: ColorType;
-		space: ColorSpace;
 		precision: number;
 	}>;
 
 	declare outputs: ToOutput<{
-		value: number;
+		value: ColorType;
 	}>;
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('colorA', {
+		this.dataflow.addInput('colorA', {
 			type: {
 				...ColorSchema,
 				default: White
 			}
 		});
-		this.addInput('colorB', {
+		this.dataflow.addInput('colorB', {
 			type: {
 				...ColorSchema,
 				default: Black
 			}
 		});
-		this.addInput('precision', {
+		this.dataflow.addInput('precision', {
 			type: {
 				...NumberSchema,
 				default: 4
 			}
 		});
-		this.addInput('space', {
+		this.dataflow.addInput('space', {
 			type: {
 				...StringSchema,
 				enum: colorSpaces,
@@ -58,7 +57,7 @@ export default class NodeDefinition extends Node {
 			}
 		});
 
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: NumberSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/color/flattenAlpha.ts b/packages/graph-engine/src/nodes/color/flattenAlpha.ts
index 1e6fdc299..883068cdc 100644
--- a/packages/graph-engine/src/nodes/color/flattenAlpha.ts
+++ b/packages/graph-engine/src/nodes/color/flattenAlpha.ts
@@ -1,10 +1,10 @@
 import { ColorSchema } from '../../schemas/index.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 import { flattenAlpha } from './lib/flattenAlpha.js';
 import { toColor, toColorObject } from './lib/utils.js';
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Flatten Alpha';
 	static type = 'studio.tokens.color.flattenAlpha';
 	static description =
@@ -12,18 +12,18 @@ export default class NodeDefinition extends Node {
 	constructor(props: INodeDefinition) {
 		super(props);
 
-		this.addInput('foreground', {
+		this.dataflow.addInput('foreground', {
 			type: {
 				...ColorSchema
 			}
 		});
-		this.addInput('background', {
+		this.dataflow.addInput('background', {
 			type: {
 				...ColorSchema
 			}
 		});
 
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: ColorSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/color/lighten.ts b/packages/graph-engine/src/nodes/color/lighten.ts
index 36e1b8c27..db8b30d69 100644
--- a/packages/graph-engine/src/nodes/color/lighten.ts
+++ b/packages/graph-engine/src/nodes/color/lighten.ts
@@ -1,11 +1,12 @@
 import { Black, toColor, toColorObject } from './lib/utils.js';
 import { ColorSchema, NumberSchema } from '../../schemas/index.js';
+import { ColorSpace } from './lib/types.js';
 import { Color as ColorType } from '../../types.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 export { ColorModifierTypes } from '@tokens-studio/types';
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Lighten Color';
 	static type = 'studio.tokens.color.lighten';
 	static description = 'Lightens a color by a specified value';
@@ -13,6 +14,7 @@ export default class NodeDefinition extends Node {
 	declare inputs: ToInput<{
 		color: ColorType;
 		value: number;
+		space: ColorSpace;
 	}>;
 
 	declare outputs: ToOutput<{
@@ -21,13 +23,13 @@ export default class NodeDefinition extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('color', {
+		this.dataflow.addInput('color', {
 			type: {
 				...ColorSchema,
 				default: Black
 			}
 		});
-		this.addInput('value', {
+		this.dataflow.addInput('value', {
 			type: {
 				...NumberSchema,
 				default: 0.5,
@@ -35,7 +37,7 @@ export default class NodeDefinition extends Node {
 			}
 		});
 
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: ColorSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/color/mix.ts b/packages/graph-engine/src/nodes/color/mix.ts
index 4f61359b4..8593723b1 100644
--- a/packages/graph-engine/src/nodes/color/mix.ts
+++ b/packages/graph-engine/src/nodes/color/mix.ts
@@ -4,13 +4,13 @@ import {
 	NumberSchema,
 	StringSchema
 } from '../../schemas/index.js';
-import { ColorSpace, ColorSpaces } from './lib/spaces.js';
+import { ColorSpace, colorSpaces } from './lib/types.js';
 import { Color as ColorType } from '../../types.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 import Color from 'colorjs.io';
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Mix Colors';
 	static type = 'studio.tokens.color.mix';
 	static description = 'Mixes two colors together';
@@ -28,35 +28,35 @@ export default class NodeDefinition extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('colorA', {
+		this.dataflow.addInput('colorA', {
 			type: {
 				...ColorSchema,
 				default: White
 			}
 		});
-		this.addInput('colorB', {
+		this.dataflow.addInput('colorB', {
 			type: {
 				...ColorSchema,
 				default: Black
 			}
 		});
-		this.addInput('value', {
+		this.dataflow.addInput('value', {
 			type: {
 				...NumberSchema,
 				default: 0.5,
 				description: 'Value to apply to the modifier'
 			}
 		});
-		this.addInput('space', {
+		this.dataflow.addInput('space', {
 			type: {
 				...StringSchema,
 				default: 'srgb',
-				enum: ColorSpaces,
+				enum: Object.keys(colorSpaces),
 				description: 'The color space we are operating in'
 			}
 		});
 
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: ColorSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/color/name.ts b/packages/graph-engine/src/nodes/color/name.ts
index 908ec6d75..5c3036d45 100644
--- a/packages/graph-engine/src/nodes/color/name.ts
+++ b/packages/graph-engine/src/nodes/color/name.ts
@@ -1,7 +1,7 @@
 import { ColorSchema, StringSchema } from '../../schemas/index.js';
 import { Color as ColorType } from '../../types.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput, toColor } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 import Color from 'colorjs.io';
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/named-color
@@ -157,7 +157,7 @@ const colorMap = {
 	yellowgreen: '#9acd32'
 };
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Name Color';
 	static type = 'studio.tokens.color.name';
 	static description = 'Returns the name of the color';
@@ -172,10 +172,10 @@ export default class NodeDefinition extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('color', {
+		this.dataflow.addInput('color', {
 			type: ColorSchema
 		});
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: StringSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/color/poline.ts b/packages/graph-engine/src/nodes/color/poline.ts
index 23f366555..9490a04ac 100644
--- a/packages/graph-engine/src/nodes/color/poline.ts
+++ b/packages/graph-engine/src/nodes/color/poline.ts
@@ -5,7 +5,7 @@ import {
 	StringSchema
 } from '../../schemas/index.js';
 import { Color, INodeDefinition } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { Poline, PositionFunction, Vector3, positionFunctions } from 'poline';
 import { arrayOf } from '../../schemas/utils.js';
 import { toColor } from './lib/utils.js';
@@ -21,47 +21,47 @@ export type PolineNodeOptions = {
 
 const positionFuncs = Object.keys(positionFunctions);
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Poline';
 	static type = 'studio.tokens.color.poline';
 	static description = '';
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('anchorColors', {
+		this.dataflow.addInput('anchorColors', {
 			type: arrayOf(ColorSchema)
 		});
-		this.addInput('numPoints', {
+		this.dataflow.addInput('numPoints', {
 			type: {
 				...NumberSchema,
 				default: 4
 			}
 		});
-		this.addInput('invertedLightness', {
+		this.dataflow.addInput('invertedLightness', {
 			type: BooleanSchema
 		});
-		this.addInput('positionFnX', {
+		this.dataflow.addInput('positionFnX', {
 			type: {
 				...StringSchema,
 				enum: positionFuncs
 			}
 		});
-		this.addInput('positionFnY', {
+		this.dataflow.addInput('positionFnY', {
 			type: {
 				...StringSchema,
 				enum: positionFuncs
 			}
 		});
-		this.addInput('positionFnZ', {
+		this.dataflow.addInput('positionFnZ', {
 			type: {
 				...StringSchema,
 				enum: positionFuncs
 			}
 		});
 
-		this.addInput('hueShift', {
+		this.dataflow.addInput('hueShift', {
 			type: NumberSchema
 		});
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: arrayOf(ColorSchema)
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/color/scale.ts b/packages/graph-engine/src/nodes/color/scale.ts
index f5cdc5244..8d0eabb51 100644
--- a/packages/graph-engine/src/nodes/color/scale.ts
+++ b/packages/graph-engine/src/nodes/color/scale.ts
@@ -1,11 +1,11 @@
 import { Color } from '../../types.js';
 import { ColorSchema, NumberSchema } from '../../schemas/index.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 import { Red, toColor, toColorObject } from './lib/utils.js';
 import { arrayOf } from '../../schemas/utils.js';
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Scale colors';
 	static type = 'studio.tokens.color.scale';
 	static description =
@@ -22,25 +22,25 @@ export default class NodeDefinition extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('color', {
+		this.dataflow.addInput('color', {
 			type: {
 				...ColorSchema,
 				default: Red
 			}
 		});
-		this.addInput('stepsUp', {
+		this.dataflow.addInput('stepsUp', {
 			type: {
 				...NumberSchema,
 				default: 5
 			}
 		});
-		this.addInput('stepsDown', {
+		this.dataflow.addInput('stepsDown', {
 			type: {
 				...NumberSchema,
 				default: 5
 			}
 		});
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: arrayOf(ColorSchema)
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/color/sortByDistance.ts b/packages/graph-engine/src/nodes/color/sortByDistance.ts
index b68389570..176a95a8a 100644
--- a/packages/graph-engine/src/nodes/color/sortByDistance.ts
+++ b/packages/graph-engine/src/nodes/color/sortByDistance.ts
@@ -1,49 +1,32 @@
-import { Color, INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import {
-	ColorSchema,
-	NumberSchema,
-	StringSchema
-} from '../../schemas/index.js';
+import { ColorSchema, StringSchema } from '../../schemas/index.js';
 import { ContrastAlgorithm } from '../../types/index.js';
-import { Node } from '../../programmatic/node.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
+import { INodeDefinition } from '../../index.js';
 import { arrayOf } from '../../schemas/utils.js';
 import { sortTokens } from './lib/sortColors.js';
 
-export default class SortByDistanceNode extends Node {
-	static title = 'Sort Colors By Distance';
+export default class SortByDistanceNode extends DataflowNode {
+	static title = 'Sort Colors by';
 	static type = 'studio.tokens.color.sortColorsBy';
 	static description =
-		'Sorts Colors by contrast, distance, hue, lightness, or saturation to a Color';
-
-	declare inputs: ToInput<{
-		colors: Color[];
-		compareColor: Color;
-		type: 'Contrast' | 'Hue' | 'Lightness' | 'Saturation' | 'Distance';
-		algorithm: ContrastAlgorithm;
-	}>;
-
-	declare outputs: ToOutput<{
-		value: Color[];
-		indices: number[];
-	}>;
-
+		'Sorts Colors by constrast, distance, hue, lightness, or saturation to a Color';
 	constructor(props: INodeDefinition) {
 		super(props);
 
-		this.addInput('colors', {
+		this.dataflow.addInput('colors', {
 			type: arrayOf(ColorSchema)
 		});
-		this.addInput('compareColor', {
+		this.dataflow.addInput('compareColor', {
 			type: ColorSchema
 		});
-		this.addInput('type', {
+		this.dataflow.addInput('type', {
 			type: {
 				...StringSchema,
 				default: 'Hue',
 				enum: ['Contrast', 'Hue', 'Lightness', 'Saturation', 'Distance']
 			}
 		});
-		this.addInput('algorithm', {
+		this.dataflow.addInput('algorithm', {
 			type: {
 				...StringSchema,
 				enum: Object.values(ContrastAlgorithm),
@@ -51,19 +34,16 @@ export default class SortByDistanceNode extends Node {
 			}
 		});
 
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: arrayOf(ColorSchema)
 		});
-		this.addOutput('indices', {
-			type: arrayOf(NumberSchema)
-		});
 	}
 
 	execute(): void | Promise<void> {
 		const { colors, compareColor, type, algorithm } = this.getAllInputs();
-		const sorted = sortTokens(colors, compareColor, type, algorithm);
 
-		this.outputs.value.set(sorted.colors);
-		this.outputs.indices.set(sorted.indices);
+		const sortedTokens = sortTokens(colors, compareColor, type, algorithm);
+
+		this.outputs.value.set(sortedTokens);
 	}
 }
diff --git a/packages/graph-engine/src/nodes/color/stringToColor.ts b/packages/graph-engine/src/nodes/color/stringToColor.ts
index da9e1ae5a..bf7b982fa 100644
--- a/packages/graph-engine/src/nodes/color/stringToColor.ts
+++ b/packages/graph-engine/src/nodes/color/stringToColor.ts
@@ -1,12 +1,12 @@
 import { ColorSchema, StringSchema } from '../../schemas/index.js';
 import { Color as ColorType } from '../../types.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 import { toColorObject } from './lib/utils.js';
 import Color from 'colorjs.io';
 export { ColorModifierTypes } from '@tokens-studio/types';
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'String to Color';
 	static type = 'studio.tokens.color.strToColor';
 	static description = 'Parses a string to a color';
@@ -21,11 +21,11 @@ export default class NodeDefinition extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('color', {
+		this.dataflow.addInput('color', {
 			type: StringSchema
 		});
 
-		this.addOutput('color', {
+		this.dataflow.addOutput('color', {
 			type: ColorSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/color/wheel.ts b/packages/graph-engine/src/nodes/color/wheel.ts
index 321364a22..0b6c1450e 100644
--- a/packages/graph-engine/src/nodes/color/wheel.ts
+++ b/packages/graph-engine/src/nodes/color/wheel.ts
@@ -1,12 +1,12 @@
 import { ColorSchema, NumberSchema } from '../../schemas/index.js';
 import { Color as ColorType } from '../../types.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 import { arrayOf } from '../../schemas/utils.js';
 import { toColorObject } from './lib/utils.js';
 import Color from 'colorjs.io';
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Color Wheel';
 	static type = 'studio.tokens.color.wheel';
 	static description =
@@ -14,38 +14,38 @@ export default class NodeDefinition extends Node {
 	constructor(props: INodeDefinition) {
 		super(props);
 
-		this.addInput('baseHue', {
+		this.dataflow.addInput('baseHue', {
 			type: {
 				...NumberSchema,
 				default: 360
 			}
 		});
-		this.addInput('angle', {
+		this.dataflow.addInput('angle', {
 			type: {
 				...NumberSchema,
 				default: 180
 			}
 		});
-		this.addInput('saturation', {
+		this.dataflow.addInput('saturation', {
 			type: {
 				...NumberSchema,
 				default: 80
 			}
 		});
-		this.addInput('lightness', {
+		this.dataflow.addInput('lightness', {
 			type: {
 				...NumberSchema,
 				default: 80
 			}
 		});
-		this.addInput('colors', {
+		this.dataflow.addInput('colors', {
 			type: {
 				...NumberSchema,
 				default: 8
 			}
 		});
 
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: arrayOf(ColorSchema)
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/css/box.ts b/packages/graph-engine/src/nodes/css/box.ts
index 331fe7388..0712ce806 100644
--- a/packages/graph-engine/src/nodes/css/box.ts
+++ b/packages/graph-engine/src/nodes/css/box.ts
@@ -1,8 +1,8 @@
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 import { NumberSchema, StringSchema } from '../../schemas/index.js';
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'CSS Box';
 	static type = 'studio.tokens.css.box';
 	static description =
@@ -20,32 +20,32 @@ export default class NodeDefinition extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('top', {
+		this.dataflow.addInput('top', {
 			type: {
 				...NumberSchema,
 				default: 0
 			}
 		});
-		this.addInput('right', {
+		this.dataflow.addInput('right', {
 			type: {
 				...NumberSchema,
 				default: 0
 			}
 		});
-		this.addInput('bottom', {
+		this.dataflow.addInput('bottom', {
 			type: {
 				...NumberSchema,
 				default: 0
 			}
 		});
-		this.addInput('left', {
+		this.dataflow.addInput('left', {
 			type: {
 				...NumberSchema,
 				default: 0
 			}
 		});
 
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: StringSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/css/cssFunction.ts b/packages/graph-engine/src/nodes/css/cssFunction.ts
index 65384caaa..3bbbebfc0 100644
--- a/packages/graph-engine/src/nodes/css/cssFunction.ts
+++ b/packages/graph-engine/src/nodes/css/cssFunction.ts
@@ -1,11 +1,11 @@
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 import { StringSchema } from '../../schemas/index.js';
 import cssFunctionsData from 'mdn-data/css/functions.json' with { type: 'json' };
 
 const FUNCTION_NAMES = Object.keys(cssFunctionsData);
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'CSS Function';
 	static type = 'studio.tokens.css.function';
 	static description = 'Applies a CSS function to the value';
@@ -22,16 +22,16 @@ export default class NodeDefinition extends Node {
 	constructor(props: INodeDefinition) {
 		super(props);
 
-		this.addInput('functionName', {
+		this.dataflow.addInput('functionName', {
 			type: {
 				...StringSchema,
 				enum: FUNCTION_NAMES
 			}
 		});
-		this.addInput('value', {
+		this.dataflow.addInput('value', {
 			type: StringSchema
 		});
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: StringSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/css/map.ts b/packages/graph-engine/src/nodes/css/map.ts
index edb22b581..95c5599f6 100644
--- a/packages/graph-engine/src/nodes/css/map.ts
+++ b/packages/graph-engine/src/nodes/css/map.ts
@@ -1,5 +1,5 @@
-import { INodeDefinition } from '../../programmatic/node.js';
-import { Node } from '../../programmatic/node.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
+import { INodeDefinition } from '../../programmatic/nodes/node.js';
 import { ObjectSchema } from '../../schemas/index.js';
 import { annotatedDynamicInputs } from '../../annotations/index.js';
 
@@ -10,7 +10,7 @@ import { annotatedDynamicInputs } from '../../annotations/index.js';
  * be. Note that you should using something like the "mdn-data" package to get the list of
  * properties and their types. This is just a convenience node.
  */
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'CSS Map';
 	static type = 'studio.tokens.css.map';
 
@@ -21,7 +21,7 @@ export default class NodeDefinition extends Node {
 
 		//Indaicate that is uses dynamic inputs
 		this.annotations[annotatedDynamicInputs] = true;
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: ObjectSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/curves/bezier.ts b/packages/graph-engine/src/nodes/curves/bezier.ts
index 162beeca8..12d7d42b1 100644
--- a/packages/graph-engine/src/nodes/curves/bezier.ts
+++ b/packages/graph-engine/src/nodes/curves/bezier.ts
@@ -1,9 +1,10 @@
 import { Curve } from '../../types.js';
 import { CurveSchema, NumberSchema } from '../../schemas/index.js';
-import { INodeDefinition, Node } from '../../programmatic/node.js';
-import { ToInput, ToOutput } from '../../programmatic/index.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
+import { INodeDefinition } from '../../programmatic/nodes/node.js';
+import { ToInput, ToOutput } from '@/programmatic/index.js';
 
-export default class BezierCurveNode extends Node {
+export default class BezierCurveNode extends DataflowNode {
 	static title = 'Bezier Curve';
 	static type = 'studio.tokens.curve.bezier';
 	static description = 'Creates a bezier curve from two control points';
@@ -22,7 +23,7 @@ export default class BezierCurveNode extends Node {
 	constructor(props: INodeDefinition) {
 		super(props);
 
-		this.addInput('x1', {
+		this.dataflow.addInput('x1', {
 			type: {
 				...NumberSchema,
 				default: 0.5,
@@ -30,7 +31,7 @@ export default class BezierCurveNode extends Node {
 				maximum: 1
 			}
 		});
-		this.addInput('y1', {
+		this.dataflow.addInput('y1', {
 			type: {
 				...NumberSchema,
 				default: 0,
@@ -38,7 +39,7 @@ export default class BezierCurveNode extends Node {
 				maximum: 1
 			}
 		});
-		this.addInput('x2', {
+		this.dataflow.addInput('x2', {
 			type: {
 				...NumberSchema,
 				default: 0.5,
@@ -46,7 +47,7 @@ export default class BezierCurveNode extends Node {
 				maximum: 1
 			}
 		});
-		this.addInput('y2', {
+		this.dataflow.addInput('y2', {
 			type: {
 				...NumberSchema,
 				default: 1,
@@ -55,7 +56,7 @@ export default class BezierCurveNode extends Node {
 			}
 		});
 
-		this.addOutput('curve', {
+		this.dataflow.addOutput('curve', {
 			type: CurveSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/curves/floatCurve.ts b/packages/graph-engine/src/nodes/curves/floatCurve.ts
index a8357f322..c79de286d 100644
--- a/packages/graph-engine/src/nodes/curves/floatCurve.ts
+++ b/packages/graph-engine/src/nodes/curves/floatCurve.ts
@@ -1,6 +1,6 @@
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { FloatCurve, INodeDefinition, ToInput, ToOutput } from '../../index.js';
 import { FloatCurveSchema, NumberSchema } from '../../schemas/index.js';
-import { Node } from '../../programmatic/node.js';
 
 export function cubicBezier(p0, c1, c2, p1, t) {
 	return (
@@ -10,7 +10,7 @@ export function cubicBezier(p0, c1, c2, p1, t) {
 		t ** 3 * p1
 	);
 }
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Sample Float Curve';
 	static type = 'studio.tokens.curve.sampleFloat';
 	static description = 'Evaluates a float curve at a given x value';
@@ -26,10 +26,10 @@ export default class NodeDefinition extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('curve', {
+		this.dataflow.addInput('curve', {
 			type: FloatCurveSchema
 		});
-		this.addInput('x', {
+		this.dataflow.addInput('x', {
 			type: {
 				...NumberSchema,
 				minimum: 0,
@@ -37,7 +37,7 @@ export default class NodeDefinition extends Node {
 				default: 0
 			}
 		});
-		this.addOutput('y', {
+		this.dataflow.addOutput('y', {
 			type: NumberSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/curves/presetBeziers.ts b/packages/graph-engine/src/nodes/curves/presetBeziers.ts
index 3f3c6770f..4973ffe15 100644
--- a/packages/graph-engine/src/nodes/curves/presetBeziers.ts
+++ b/packages/graph-engine/src/nodes/curves/presetBeziers.ts
@@ -1,7 +1,8 @@
 import { Curve } from '../../types.js';
 import { CurveSchema, StringSchema } from '../../schemas/index.js';
-import { INodeDefinition, Node } from '../../programmatic/node.js';
-import { ToInput, ToOutput } from '../../programmatic/index.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
+import { INodeDefinition } from '../../programmatic/nodes/node.js';
+import { ToInput, ToOutput } from '@/programmatic/index.js';
 
 export const presetBeziers = {
 	easeInOutSine: [0.445, 0.05, 0.55, 0.95],
@@ -32,7 +33,7 @@ export const presetBeziers = {
 	easeOutBack: [0.175, 0.885, 0.32, 1.275]
 };
 
-export default class BezierCurveNode extends Node {
+export default class BezierCurveNode extends DataflowNode {
 	static title = 'Preset Bezier Curves';
 	static type = 'studio.tokens.curve.presetBeziers';
 	static description = 'Allows you to choose from preset bezier curves';
@@ -48,7 +49,7 @@ export default class BezierCurveNode extends Node {
 	constructor(props: INodeDefinition) {
 		super(props);
 
-		this.addInput('name', {
+		this.dataflow.addInput('name', {
 			type: {
 				...StringSchema,
 				enum: Object.keys(presetBeziers),
@@ -56,7 +57,7 @@ export default class BezierCurveNode extends Node {
 			}
 		});
 
-		this.addOutput('curve', {
+		this.dataflow.addOutput('curve', {
 			type: CurveSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/curves/sample.ts b/packages/graph-engine/src/nodes/curves/sample.ts
index 03d45b722..8273859b7 100644
--- a/packages/graph-engine/src/nodes/curves/sample.ts
+++ b/packages/graph-engine/src/nodes/curves/sample.ts
@@ -1,7 +1,7 @@
 import { Curve } from '../../types.js';
 import { CurveSchema, NumberSchema, Vec2Schema } from '../../schemas/index.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 
 const scaleVec = (vec, scale) => vec.map(v => v * scale);
 const addVec = (vec1, vec2) => vec1.map((v, i) => v + vec2[i]);
@@ -18,7 +18,7 @@ const sampleBezier = (bezier: Curve['curves'][0], sample) => {
 	].reduce(addVec, [0, 0]);
 };
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Sample Curve';
 	static type = 'studio.tokens.curve.sample';
 	static description = 'Samples a curve at a specified point';
@@ -39,28 +39,26 @@ export default class NodeDefinition extends Node {
 		 * A 2D vector representing the value of the curve at the sample point
 		 */
 		value: [number, number];
-		x: number;
-		y: number;
 	}>;
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('curve', {
+		this.dataflow.addInput('curve', {
 			type: CurveSchema
 		});
-		this.addInput('sample', {
+		this.dataflow.addInput('sample', {
 			type: {
 				...NumberSchema,
 				default: 0.5
 			}
 		});
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: Vec2Schema
 		});
-		this.addOutput('x', {
+		this.dataflow.addOutput('x', {
 			type: NumberSchema
 		});
-		this.addOutput('y', {
+		this.dataflow.addOutput('y', {
 			type: NumberSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/generic/constant.ts b/packages/graph-engine/src/nodes/generic/constant.ts
index 1e4ee40c3..2dedb21e6 100644
--- a/packages/graph-engine/src/nodes/generic/constant.ts
+++ b/packages/graph-engine/src/nodes/generic/constant.ts
@@ -1,6 +1,6 @@
 import { AnySchema } from '../../schemas/index.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 /**
  * @example
  *
@@ -8,7 +8,7 @@ import { Node } from '../../programmatic/node.js';
  * {"nodes":[{"id":"dd036f7a-c617-4451-aa8e-6cf0dde16d81","type":"studio.tokens.generic.note","inputs":[],"annotations":{"ui.position.x":19.784708658854186,"ui.position.y":110.40046183268228,"ui.nodeType":"studio.tokens.generic.note","ui.description":"You can use contants to connect to multiple nodes to share common values"}},{"id":"41b7ddf1-6c9c-496d-8f8a-80575f31ef1a","type":"studio.tokens.generic.constant","inputs":[{"name":"value","value":"Incoming Value","type":{"$id":"https://schemas.tokens.studio/any.json","title":"Any"},"dynamicType":{"$id":"https://schemas.tokens.studio/string.json","title":"String","type":"string"},"annotations":{"ui.resetable":true}}],"annotations":{"ui.position.x":13.1180419921875,"ui.position.y":245.067128499349}},{"id":"7c542b0d-a790-41b7-9160-3ce4ce1645d6","type":"studio.tokens.string.lowercase","inputs":[{"name":"value","value":"Incoming Value","type":{"$id":"https://schemas.tokens.studio/string.json","title":"String","type":"string"},"visible":true}],"annotations":{"ui.position.x":420.45137532552076,"ui.position.y":143.06712849934894}},{"id":"0d66beae-73e5-48ce-a502-f4e1963aa4f3","type":"studio.tokens.string.uppercase","inputs":[{"name":"value","value":"Incoming Value","type":{"$id":"https://schemas.tokens.studio/string.json","title":"String","type":"string"},"visible":true}],"annotations":{"ui.position.x":429.784708658854,"ui.position.y":262.40046183268225}},{"id":"e0535da0-259a-4c21-aee7-418109929494","type":"studio.tokens.string.split","inputs":[{"name":"value","value":"Incoming Value","type":{"$id":"https://schemas.tokens.studio/string.json","title":"String","type":"string"},"visible":true},{"name":"separator","value":"","type":{"$id":"https://schemas.tokens.studio/string.json","title":"String","type":"string","default":","},"visible":true}],"annotations":{"ui.position.x":433.7847086588543,"ui.position.y":372.4004618326823}}],"edges":[{"id":"9d517cde-beb6-475f-ad18-7adb176c7737","source":"41b7ddf1-6c9c-496d-8f8a-80575f31ef1a","sourceHandle":"value","target":"7c542b0d-a790-41b7-9160-3ce4ce1645d6","targetHandle":"value"},{"id":"10d379e4-1ad4-45d3-bd11-b9e97d06004c","source":"41b7ddf1-6c9c-496d-8f8a-80575f31ef1a","sourceHandle":"value","target":"0d66beae-73e5-48ce-a502-f4e1963aa4f3","targetHandle":"value"},{"id":"7436c6e8-96ad-4217-8eae-76f542166c32","source":"41b7ddf1-6c9c-496d-8f8a-80575f31ef1a","sourceHandle":"value","target":"e0535da0-259a-4c21-aee7-418109929494","targetHandle":"value"}],"annotations":{"engine.id":"aa86a676-c31b-4583-ab7c-bfcb5f0b12fd","engine.capabilities.web-audio":"0.0.0","engine.capabilities.fs":"0.0.0","engine.version":"0.12.0","ui.viewport":{"x":108.63084849784411,"y":187.33543980170202,"zoom":1.1023008602108806},"ui.version":"2.9.4"}}
  * ```
  */
-export default class NodeDefinition<T> extends Node {
+export default class NodeDefinition<T> extends DataflowNode {
 	static title = 'Constant';
 	static type = 'studio.tokens.generic.constant';
 
@@ -26,11 +26,11 @@ export default class NodeDefinition<T> extends Node {
 		'Constant node allows you to provide a constant value. You can use this node to set a constant value for a specific property.';
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('value', {
+		this.dataflow.addInput('value', {
 			type: AnySchema,
 			visible: false
 		});
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: AnySchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/generic/delay.ts b/packages/graph-engine/src/nodes/generic/delay.ts
deleted file mode 100644
index 9b380d12a..000000000
--- a/packages/graph-engine/src/nodes/generic/delay.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import { AnySchema, NumberSchema } from '../../schemas/index.js';
-import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
-
-/**
- * A node that passes through the input to the output.
- */
-export default class NodeDefinition<T> extends Node {
-	static title = 'Delay';
-	static type = 'studio.tokens.generic.delay';
-	static description =
-		'When trigger, it will output the provided value after a delay';
-
-	declare inputs: ToInput<{
-		value: T;
-		/**
-		 * The delay in milliseconds
-		 * @default 1000
-		 */
-		delay: number;
-	}>;
-	declare outputs: ToOutput<{
-		value: T;
-	}>;
-
-	_interval: NodeJS.Timer | null = null;
-	constructor(props: INodeDefinition) {
-		super(props);
-
-		this.addInput('value', {
-			type: AnySchema
-		});
-		this.addInput('delay', {
-			type: {
-				...NumberSchema,
-				default: 1000
-			}
-		});
-		this.addOutput('value', {
-			type: AnySchema
-		});
-	}
-	async execute() {
-		const { delay } = this.getAllInputs();
-		const raw = this.inputs.value;
-
-		return new Promise<void>(resolve => {
-			setTimeout(() => {
-				this.outputs.value.set(raw.value, raw.type);
-				resolve();
-			}, delay);
-		});
-	}
-}
diff --git a/packages/graph-engine/src/nodes/generic/index.ts b/packages/graph-engine/src/nodes/generic/index.ts
index 978149dbc..9f166fc4d 100644
--- a/packages/graph-engine/src/nodes/generic/index.ts
+++ b/packages/graph-engine/src/nodes/generic/index.ts
@@ -1,5 +1,4 @@
 import constant from './constant.js';
-import delay from './delay.js';
 import input from './input.js';
 import note from './note.js';
 import objectMerge from './objectMerge.js';
@@ -9,8 +8,6 @@ import output from './output.js';
 import panic from './panic.js';
 import passthrough from './passthrough.js';
 import subgraph from './subgraph.js';
-import time from './time.js';
-
 export const nodes = [
 	constant,
 	input,
@@ -21,7 +18,5 @@ export const nodes = [
 	panic,
 	note,
 	objectPath,
-	objectMerge,
-	time,
-	delay
+	objectMerge
 ];
diff --git a/packages/graph-engine/src/nodes/generic/input.ts b/packages/graph-engine/src/nodes/generic/input.ts
index dea9d3e1c..6d451a08b 100644
--- a/packages/graph-engine/src/nodes/generic/input.ts
+++ b/packages/graph-engine/src/nodes/generic/input.ts
@@ -1,6 +1,7 @@
+import { DataFlowPort } from '@/programmatic/dataflow/base.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { IDeserializeOpts } from '../../graph/types.js';
-import { INodeDefinition } from '../../programmatic/node.js';
-import { Node } from '../../programmatic/node.js';
+import { INodeDefinition } from '../../programmatic/nodes/node.js';
 import {
 	annotatedDynamicInputs,
 	annotatedSingleton
@@ -16,13 +17,16 @@ import { getAllOutputs } from '@/utils/node.js';
  * {"nodes":[{"id":"06820963-bbea-4a11-9d63-5e99dbcb27f7","type":"studio.tokens.generic.input","inputs":[{"name":"MyNumber","value":43,"type":{"$id":"https://schemas.tokens.studio/number.json","title":"Number","type":"number"},"annotations":{"ui.deletable":true}},{"name":"IsWorking","value":true,"type":{"$id":"https://schemas.tokens.studio/boolean.json","title":"Boolean","type":"boolean","default":false},"annotations":{"ui.deletable":true}},{"name":"BackgroundColor","value":"#2cd6d8","type":{"$id":"https://schemas.tokens.studio/color.json","title":"Color","type":"string"},"annotations":{"ui.deletable":true}},{"name":"SomeName","value":"Foo Bar","type":{"$id":"https://schemas.tokens.studio/string.json","title":"String","type":"string"},"annotations":{"ui.deletable":true}}],"annotations":{"engine.singleton":true,"engine.dynamicInputs":true,"ui.position.x":160.45137532552098,"ui.position.y":261.9444427490234}},{"id":"7dcf7462-3f8f-4144-9b2f-e9a7770495d4","type":"studio.tokens.generic.note","inputs":[],"annotations":{"ui.position.x":165.78470865885419,"ui.position.y":134.40046183268234,"ui.nodeType":"studio.tokens.generic.note","ui.description":"Inputs are the primary way information is passed into your graph. You should only have one of them per graph."}}],"edges":[],"annotations":{"engine.id":"efa13f81-66dc-4d9e-8651-a18e750773c5","engine.version":"0.12.0","ui.viewport":{"x":0,"y":0,"zoom":1.5},"ui.version":"2.9.4"}}
  * ```
  */
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Input';
 	static type = 'studio.tokens.generic.input';
 
 	static description =
 		'Allows you to provide initial values for the whole graph. An input node can be used only once at the start of the graph. You can use this node to set brand decisions or any initial values.';
 
+	declare inputs: Record<string, DataFlowPort>;
+	declare outputs: Record<string, DataFlowPort>;
+
 	constructor(props: INodeDefinition) {
 		super(props);
 		//By default we don't define any ports, these are all dynamic
@@ -31,11 +35,11 @@ export default class NodeDefinition extends Node {
 	}
 
 	static override async deserialize(opts: IDeserializeOpts) {
-		const node = await super.deserialize(opts);
+		const node = (await super.deserialize(opts)) as DataflowNode;
 		//Create the outputs immediately
 		Object.keys(node.inputs).forEach(input => {
-			const rawInput = node.inputs[input];
-			node.addOutput(input, {
+			const rawInput = node.inputs[input] as DataFlowPort;
+			node.dataflow.addOutput(input, {
 				type: rawInput.type
 			});
 		});
@@ -52,7 +56,7 @@ export default class NodeDefinition extends Node {
 			const rawInput = this.inputs[input];
 
 			if (!(input in outputs)) {
-				this.addOutput(input, {
+				this.dataflow.addOutput(input, {
 					type: rawInput.type
 				});
 			} else {
diff --git a/packages/graph-engine/src/nodes/generic/note.ts b/packages/graph-engine/src/nodes/generic/note.ts
index 706d457da..7aa0db403 100644
--- a/packages/graph-engine/src/nodes/generic/note.ts
+++ b/packages/graph-engine/src/nodes/generic/note.ts
@@ -1,4 +1,4 @@
-import { Node } from '../../programmatic/node.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 
 /**
  * @example
@@ -7,7 +7,7 @@ import { Node } from '../../programmatic/node.js';
  * {"nodes":[{"id":"be2be49c-3c7f-4f6a-a175-d44c7318e7a0","type":"studio.tokens.generic.note","inputs":[],"annotations":{"ui.position.x":-569.453229296693,"ui.position.y":484.6400208706624,"ui.nodeType":"studio.tokens.generic.note","ui.description":"Notes can be used to store arbitrary information in your graph. \n\nNote you can also store information directly in the `ui.description` annotation property of any node"}}],"edges":[],"annotations":{"engine.id":"b320d136-53d8-4683-8d6a-359caa44fdf0","engine.capabilities.web-audio":"0.0.0","engine.capabilities.fs":"0.0.0","engine.version":"0.12.0","ui.viewport":{"x":909.6901824036067,"y":-89.57980497538804,"zoom":0.8587414984357615},"ui.version":"2.9.4"}}
  * ```
  */
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Note';
 	static type = 'studio.tokens.generic.note';
 
diff --git a/packages/graph-engine/src/nodes/generic/objectMerge.ts b/packages/graph-engine/src/nodes/generic/objectMerge.ts
index 3f958dc9f..0908d179e 100644
--- a/packages/graph-engine/src/nodes/generic/objectMerge.ts
+++ b/packages/graph-engine/src/nodes/generic/objectMerge.ts
@@ -1,6 +1,6 @@
 import { AnySchema, StringSchema } from '../../schemas/index.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 import { arrayOf } from '../../schemas/utils.js';
 import deepMerge from '@bundled-es-modules/deepmerge';
 
@@ -25,7 +25,7 @@ const CONCAT = 'concat';
 const MERGE = 'merge';
 const COMBINE = 'combine';
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Merge objects';
 	static type = 'studio.tokens.generic.mergeObjects';
 	static description =
@@ -41,20 +41,20 @@ export default class NodeDefinition extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('objects', {
+		this.dataflow.addInput('objects', {
 			type: {
 				...arrayOf(AnySchema),
 				default: []
 			}
 		});
-		this.addInput('concatArray', {
+		this.dataflow.addInput('concatArray', {
 			type: {
 				...StringSchema,
 				enum: [CONCAT, MERGE, COMBINE],
 				default: CONCAT
 			}
 		});
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: AnySchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/generic/objectProperty.ts b/packages/graph-engine/src/nodes/generic/objectProperty.ts
index c176ff8c6..a1744c914 100644
--- a/packages/graph-engine/src/nodes/generic/objectProperty.ts
+++ b/packages/graph-engine/src/nodes/generic/objectProperty.ts
@@ -1,8 +1,9 @@
 import { AnySchema, BooleanSchema, StringSchema } from '../../schemas/index.js';
-import { INodeDefinition, Node } from '../../programmatic/node.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
+import { INodeDefinition } from '../../programmatic/nodes/node.js';
 import { SchemaObject } from 'ajv';
-import { ToInput } from '../../programmatic/input.js';
-import { ToOutput } from '../../programmatic/output.js';
+import { ToInput } from '../../programmatic/dataflow/input.js';
+import { ToOutput } from '../../programmatic/dataflow/output.js';
 
 function getSchemaByPath(schema: SchemaObject, path: string) {
 	// Remove the leading dot if present
@@ -39,7 +40,7 @@ function getNestedProperty(obj: object, path: string) {
 	return keys.reduce((acc, key) => acc && acc[key], obj);
 }
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Object Path';
 	static type = 'studio.tokens.generic.objectPath';
 	static description = 'Accesses an object at a given path.';
@@ -56,19 +57,19 @@ export default class NodeDefinition extends Node {
 	constructor(props: INodeDefinition) {
 		super(props);
 
-		this.addInput('object', {
+		this.dataflow.addInput('object', {
 			type: AnySchema
 		});
 
-		this.addInput('path', {
+		this.dataflow.addInput('path', {
 			type: StringSchema
 		});
 
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: AnySchema
 		});
 
-		this.addOutput('missing', {
+		this.dataflow.addOutput('missing', {
 			type: BooleanSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/generic/objectify.ts b/packages/graph-engine/src/nodes/generic/objectify.ts
index e52887043..4967033a5 100644
--- a/packages/graph-engine/src/nodes/generic/objectify.ts
+++ b/packages/graph-engine/src/nodes/generic/objectify.ts
@@ -1,10 +1,11 @@
-import { INodeDefinition, Node } from '../../programmatic/node.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
+import { INodeDefinition } from '../../programmatic/nodes/node.js';
 import { ObjectSchema } from '../../schemas/index.js';
-import { ToInput } from '../../programmatic/input.js';
-import { ToOutput } from '../../programmatic/output.js';
+import { ToInput } from '../../programmatic/dataflow/input.js';
+import { ToOutput } from '../../programmatic/dataflow/output.js';
 import { annotatedDynamicInputs } from '../../annotations/index.js';
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Objectify';
 	static type = 'studio.tokens.generic.objectify';
 	static description =
@@ -22,7 +23,7 @@ export default class NodeDefinition extends Node {
 
 		this.annotations[annotatedDynamicInputs] = true;
 		//Purely runtime inputs
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: ObjectSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/generic/output.ts b/packages/graph-engine/src/nodes/generic/output.ts
index d1ab599fd..15c01010e 100644
--- a/packages/graph-engine/src/nodes/generic/output.ts
+++ b/packages/graph-engine/src/nodes/generic/output.ts
@@ -1,5 +1,7 @@
+import { DataFlowPort } from '@/programmatic/dataflow/base.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { IDeserializeOpts } from '../../graph/types.js';
-import { INodeDefinition, Node } from '../../programmatic/node.js';
+import { INodeDefinition } from '../../programmatic/nodes/node.js';
 import {
 	annotatedDynamicInputs,
 	annotatedSingleton
@@ -9,7 +11,7 @@ import { getAllOutputs } from '@/utils/node.js';
 /**
  * Acts as an output node for the graph. There should only be a single output node per graph.
  */
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Output';
 	static type = 'studio.tokens.generic.output';
 
@@ -20,13 +22,16 @@ export default class NodeDefinition extends Node {
 		this.annotations[annotatedDynamicInputs] = true;
 	}
 
+	declare inputs: Record<string, DataFlowPort>;
+	declare outputs: Record<string, DataFlowPort>;
+
 	static override async deserialize(opts: IDeserializeOpts) {
-		const node = await super.deserialize(opts);
+		const node = (await super.deserialize(opts)) as DataflowNode;
 
 		//Create the outputs immediately as we are just a passthrough
 		Object.keys(node.inputs).forEach(input => {
 			const rawInput = node.inputs[input];
-			node.addOutput(input, {
+			node.dataflow.addOutput(input, {
 				visible: false,
 				type: rawInput.type
 			});
@@ -44,7 +49,7 @@ export default class NodeDefinition extends Node {
 			const rawInput = this.inputs[input];
 
 			if (!(input in outputs)) {
-				this.addOutput(input, {
+				this.dataflow.addOutput(input, {
 					type: rawInput.type,
 					visible: false
 				});
diff --git a/packages/graph-engine/src/nodes/generic/panic.ts b/packages/graph-engine/src/nodes/generic/panic.ts
index 59b9597b6..3a6fb78bb 100644
--- a/packages/graph-engine/src/nodes/generic/panic.ts
+++ b/packages/graph-engine/src/nodes/generic/panic.ts
@@ -1,6 +1,6 @@
 import { AnySchema } from '../../schemas/index.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 
 /**
  * @example
@@ -9,7 +9,7 @@ import { Node } from '../../programmatic/node.js';
  * {"nodes":[{"id":"b9fe0c33-d89e-4fad-85cc-eb000e269622","type":"studio.tokens.generic.constant","inputs":[{"name":"value","value":false,"type":{"$id":"https://schemas.tokens.studio/any.json","title":"Any"},"dynamicType":{"$id":"https://schemas.tokens.studio/boolean.json","title":"Boolean","type":"boolean","default":false},"annotations":{"ui.resetable":true}}],"annotations":{"ui.position.x":35.11804199218733,"ui.position.y":246.32638579631532}},{"id":"4c5e0b58-1d11-4d79-b488-bcddf5ea5e2c","type":"studio.tokens.generic.panic","inputs":[{"name":"trigger","value":false,"type":{"$id":"https://schemas.tokens.studio/any.json","title":"Any"},"dynamicType":{"$id":"https://schemas.tokens.studio/boolean.json","title":"Boolean","type":"boolean","default":false},"visible":true}],"annotations":{"ui.position.x":429.1180419921875,"ui.position.y":244.32638579631532}},{"id":"1e615f42-87e1-4110-a541-b5dd9523dc52","type":"studio.tokens.generic.note","inputs":[],"annotations":{"ui.position.x":231.78470865885424,"ui.position.y":22.326385796315336,"ui.nodeType":"studio.tokens.generic.note","ui.description":"The Panic node will trigger an error if any truthy value is set to it. Try changing the value of the constant to true to see it in action. \n\nThis can be used for things like input validation or other complex error conditions to fail a graph."}}],"edges":[{"id":"5acad9fa-ef6a-48e1-b402-68bbf1e68044","source":"b9fe0c33-d89e-4fad-85cc-eb000e269622","sourceHandle":"value","target":"4c5e0b58-1d11-4d79-b488-bcddf5ea5e2c","targetHandle":"trigger"}],"annotations":{"engine.id":"184283f1-ffce-469f-9712-de360aecfc9f","engine.capabilities.web-audio":"0.0.0","engine.capabilities.fs":"0.0.0","engine.version":"0.12.0","ui.viewport":{"x":0,"y":111.11111405455044,"zoom":1.5},"ui.version":"2.9.4"}}
  * ```
  */
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Panic';
 	static type = 'studio.tokens.generic.panic';
 	static description = 'Panics if passed a truthy value';
@@ -21,7 +21,7 @@ export default class NodeDefinition extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('trigger', {
+		this.dataflow.addInput('trigger', {
 			type: AnySchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/generic/passthrough.ts b/packages/graph-engine/src/nodes/generic/passthrough.ts
index 265778c70..66425d5a3 100644
--- a/packages/graph-engine/src/nodes/generic/passthrough.ts
+++ b/packages/graph-engine/src/nodes/generic/passthrough.ts
@@ -1,11 +1,11 @@
 import { AnySchema } from '../../schemas/index.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 
 /**
  * A node that passes through the input to the output.
  */
-export default class NodeDefinition<T> extends Node {
+export default class NodeDefinition<T> extends DataflowNode {
 	static title = 'Passthrough';
 	static type = 'studio.tokens.generic.passthrough';
 	static description = 'Passes a value through to the output';
@@ -18,10 +18,10 @@ export default class NodeDefinition<T> extends Node {
 	}>;
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('value', {
+		this.dataflow.addInput('value', {
 			type: AnySchema
 		});
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: AnySchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/generic/subgraph.ts b/packages/graph-engine/src/nodes/generic/subgraph.ts
index 0f1b2c3c7..f422af5e2 100644
--- a/packages/graph-engine/src/nodes/generic/subgraph.ts
+++ b/packages/graph-engine/src/nodes/generic/subgraph.ts
@@ -1,26 +1,29 @@
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { Graph } from '../../graph/graph.js';
 import {
 	IDeserializeOpts,
 	SerializedGraph,
 	SerializedNode
 } from '../../graph/types.js';
-import { INodeDefinition, Node } from '../../programmatic/node.js';
+import { INodeDefinition } from '../../programmatic/nodes/node.js';
+import { WithDataFlow } from '@/capabilities/dataflow.js';
 import {
 	annotatedDeleteable,
 	hideFromParentSubgraph
 } from '../../annotations/index.js';
 import { autorun } from 'mobx';
+import { injectCapabilities } from '@/utils/graph.js';
 import InputNode from './input.js';
 import OutputNode from './output.js';
 
 export interface SerializedSubgraphNode extends SerializedNode {
-	innergraph?: SerializedGraph;
+	innergraph: SerializedGraph;
 }
 export interface ISubgraphNode extends INodeDefinition {
 	innergraph?: Graph;
 }
 
-export default class SubgraphNode extends Node {
+export default class SubgraphNode extends DataflowNode {
 	static title = 'Subgraph';
 	static type = 'studio.tokens.generic.subgraph';
 	static description = 'Allows you to run another subgraph internally';
@@ -34,10 +37,11 @@ export default class SubgraphNode extends Node {
 		this._innerGraph = props.innergraph || new Graph();
 
 		//Pass capabilities down
-		this._innerGraph.capabilities = this.getGraph().capabilities;
+		//Pass capabilities down
+		injectCapabilities(this.getGraph(), this._innerGraph);
 
-		let input: InputNode | undefined = undefined;
-		let output: OutputNode | undefined = undefined;
+		let input: InputNode;
+		let output: OutputNode;
 
 		if (!existing) {
 			input = new InputNode({ graph: this._innerGraph });
@@ -57,20 +61,20 @@ export default class SubgraphNode extends Node {
 					output = node as OutputNode;
 				}
 			});
-		}
 
-		if (!input) throw new Error('No input node found');
-		if (!output) throw new Error('No output node found');
+			if (!input) throw new Error('No input node found');
+			if (!output) throw new Error('No output node found');
+		}
 
 		autorun(() => {
 			//Get the existing inputs
 			const existing = this.inputs;
 			//Iterate through the inputs of the input node in the inner graph
-			Object.entries(input!.inputs).map(([key, value]) => {
+			Object.entries(input.inputs).map(([key, value]) => {
 				//If the key doesn't exist in the existing inputs, add it
 				if (!existing[key] && !value.annotations[hideFromParentSubgraph]) {
 					//Always add it as visible
-					this.addInput(key, {
+					this.dataflow.addInput(key, {
 						type: value.type
 					});
 					this.inputs[key].setValue(value.value, {
@@ -91,11 +95,11 @@ export default class SubgraphNode extends Node {
 		autorun(() => {
 			const existing = this.outputs;
 			const existingPorts = Object.keys(existing);
-			Object.entries(output!.inputs).map(([key, value]) => {
+			Object.entries(output.inputs).map(([key, value]) => {
 				//If the key doesn't exist in the existing inputs, add it
 				if (!existing[key] && !value.annotations[hideFromParentSubgraph]) {
 					//Always add it as visible
-					this.addOutput(key, {
+					this.dataflow.addOutput(key, {
 						type: value.type
 					});
 					this.outputs[key].set(value.value, value.type);
@@ -108,7 +112,7 @@ export default class SubgraphNode extends Node {
 
 			//Remove any outputs that are no longer in the inner graph
 			existingPorts.forEach(port => {
-				if (!output!.inputs[port]) {
+				if (!output.inputs[port]) {
 					this.removeOutput(port);
 				}
 			});
@@ -124,12 +128,10 @@ export default class SubgraphNode extends Node {
 	}
 
 	static override async deserialize(opts: IDeserializeOpts) {
-		const serializedInner = (opts.serialized as SerializedSubgraphNode)
-			.innergraph;
-
-		const innergraph = serializedInner
-			? await new Graph().deserialize(serializedInner, opts.lookup)
-			: undefined;
+		const innergraph = await new Graph().deserialize(
+			(opts.serialized as SerializedSubgraphNode).innergraph,
+			opts.lookup
+		);
 
 		const node = (await super.deserialize({
 			...opts,
@@ -148,11 +150,13 @@ export default class SubgraphNode extends Node {
 			return acc;
 		}, {});
 
-		const result = await this._innerGraph.execute({
+		const result = await (
+			this._innerGraph as WithDataFlow<Graph>
+		).capabilities.dataFlow.execute({
 			inputs
 		});
 
-		Object.entries(result.output || {}).forEach(([key, value]) => {
+		Object.entries(result.output).forEach(([key, value]) => {
 			this.outputs[key].set(value.value, value.type);
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/generic/testDraw.ts b/packages/graph-engine/src/nodes/generic/testDraw.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/graph-engine/src/nodes/generic/time.ts b/packages/graph-engine/src/nodes/generic/time.ts
deleted file mode 100644
index 78c580828..000000000
--- a/packages/graph-engine/src/nodes/generic/time.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { INodeDefinition, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
-import { NumberSchema } from '../../schemas/index.js';
-
-/**
- * A node that returns the current time each tick in seconds since the Unix epoch.
- * When the node is started, it will update the time every second.
- */
-export default class NodeDefinition extends Node {
-	static title = 'Time';
-	static type = 'studio.tokens.generic.time';
-	static description = 'Provides the current time each tick';
-
-	declare outputs: ToOutput<{
-		value: number;
-	}>;
-
-	_interval: NodeJS.Timeout | null = null;
-	constructor(props: INodeDefinition) {
-		super(props);
-
-		this.addOutput('value', {
-			type: NumberSchema
-		});
-	}
-
-	onStart = () => {
-		if (this._interval) {
-			clearInterval(this._interval);
-		}
-		this._interval = setInterval(() => {
-			this.run();
-		}, 1000);
-	};
-	onStop = () => {
-		if (this._interval) {
-			clearInterval(this._interval);
-		}
-	};
-
-	execute(): void | Promise<void> {
-		this.outputs.value.set(Date.now());
-	}
-}
diff --git a/packages/graph-engine/src/nodes/gradient/gradientStop.ts b/packages/graph-engine/src/nodes/gradient/gradientStop.ts
index b67665e7c..1723b9005 100644
--- a/packages/graph-engine/src/nodes/gradient/gradientStop.ts
+++ b/packages/graph-engine/src/nodes/gradient/gradientStop.ts
@@ -3,23 +3,23 @@ import {
 	GradientStopSchema,
 	NumberSchema
 } from '../../schemas/index.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Gradient Stop';
 	static type = 'studio.tokens.gradient.stop';
 	static description = 'Create a gradient stop.';
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('color', {
+		this.dataflow.addInput('color', {
 			type: ColorSchema
 		});
-		this.addInput('position', {
+		this.dataflow.addInput('position', {
 			type: NumberSchema
 		});
-		this.addOutput('gradientStop', {
+		this.dataflow.addOutput('gradientStop', {
 			type: GradientStopSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/index.ts b/packages/graph-engine/src/nodes/index.ts
index d80ea4b0a..9b7b51b94 100644
--- a/packages/graph-engine/src/nodes/index.ts
+++ b/packages/graph-engine/src/nodes/index.ts
@@ -7,19 +7,19 @@ import { nodes as generic } from './generic/index.js';
 import { nodes as gradient } from './gradient/index.js';
 import { nodes as logic } from './logic/index.js';
 import { nodes as math } from './math/index.js';
+import { nodes as network } from './network/index.js';
 import { nodes as preview } from './preview/index.js';
-import { nodes as search } from './search/index.js';
 import { nodes as series } from './series/index.js';
 import { nodes as string } from './string/index.js';
 import { nodes as typing } from './typing/index.js';
 import { nodes as typography } from './typography/index.js';
 import { nodes as vector2 } from './vector2/index.js';
-import type { Node } from '../programmatic/node.js';
+import type { Node } from '../programmatic/nodes/node.js';
 
 /**
  * All nodes in the system available as an array
  */
-export const nodes: (typeof Node)[] = ([] as (typeof Node)[]).concat(
+export const nodes = [].concat(
 	accessibility,
 	array,
 	color,
@@ -30,12 +30,12 @@ export const nodes: (typeof Node)[] = ([] as (typeof Node)[]).concat(
 	logic,
 	math,
 	preview,
-	search,
 	series,
 	string,
 	typing,
+	vector2,
 	typography,
-	vector2
+	network
 );
 
 /**
diff --git a/packages/graph-engine/src/nodes/logic/and.ts b/packages/graph-engine/src/nodes/logic/and.ts
index 7c7a91529..9a7b81a38 100644
--- a/packages/graph-engine/src/nodes/logic/and.ts
+++ b/packages/graph-engine/src/nodes/logic/and.ts
@@ -3,10 +3,10 @@ import {
 	BooleanSchema,
 	createVariadicSchema
 } from '../../schemas/index.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 
-export default class NodeDefinition<T> extends Node {
+export default class NodeDefinition<T> extends DataflowNode {
 	static title = 'Logical and';
 	static type = 'studio.tokens.logic.and';
 	static description = 'AND node allows you to check if all inputs are true.';
@@ -21,14 +21,14 @@ export default class NodeDefinition<T> extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('inputs', {
+		this.dataflow.addInput('inputs', {
 			type: {
 				...createVariadicSchema(AnySchema),
 				default: []
 			},
 			variadic: true
 		});
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: BooleanSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/logic/compare.ts b/packages/graph-engine/src/nodes/logic/compare.ts
index 85196f0f1..437a01c8a 100644
--- a/packages/graph-engine/src/nodes/logic/compare.ts
+++ b/packages/graph-engine/src/nodes/logic/compare.ts
@@ -1,9 +1,17 @@
 import { AnySchema, BooleanSchema, StringSchema } from '../../schemas/index.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
-import { Operator } from '../../schemas/operators.js';
 
-export default class NodeDefinition<T> extends Node {
+export enum Operator {
+	EQUAL = '==',
+	NOT_EQUAL = '!=',
+	GREATER_THAN = '>',
+	LESS_THAN = '<',
+	GREATER_THAN_OR_EQUAL = '>=',
+	LESS_THAN_OR_EQUAL = '<='
+}
+
+export default class NodeDefinition<T> extends DataflowNode {
 	static title = 'Compare';
 	static type = 'studio.tokens.logic.compare';
 	static description =
@@ -20,13 +28,14 @@ export default class NodeDefinition<T> extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('a', {
+		this.dataflow.addInput('a', {
 			type: AnySchema
 		});
-		this.addInput('b', {
+		this.dataflow.addInput('b', {
 			type: AnySchema
 		});
-		this.addInput('operator', {
+
+		this.dataflow.addInput('operator', {
 			type: {
 				...StringSchema,
 				enum: Object.values(Operator),
@@ -34,7 +43,7 @@ export default class NodeDefinition<T> extends Node {
 			}
 		});
 
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: BooleanSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/logic/if.ts b/packages/graph-engine/src/nodes/logic/if.ts
index 9ad78b77f..27be18fbc 100644
--- a/packages/graph-engine/src/nodes/logic/if.ts
+++ b/packages/graph-engine/src/nodes/logic/if.ts
@@ -1,8 +1,8 @@
 import { AnySchema, BooleanSchema } from '../../schemas/index.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 
-export default class NodeDefinition<T, V> extends Node {
+export default class NodeDefinition<T, V> extends DataflowNode {
 	static title = 'If';
 	static type = 'studio.tokens.logic.if';
 	static description =
@@ -20,16 +20,16 @@ export default class NodeDefinition<T, V> extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('condition', {
+		this.dataflow.addInput('condition', {
 			type: BooleanSchema
 		});
-		this.addInput('a', {
+		this.dataflow.addInput('a', {
 			type: AnySchema
 		});
-		this.addInput('b', {
+		this.dataflow.addInput('b', {
 			type: AnySchema
 		});
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: AnySchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/logic/not.ts b/packages/graph-engine/src/nodes/logic/not.ts
index b82baed12..e7b313f6e 100644
--- a/packages/graph-engine/src/nodes/logic/not.ts
+++ b/packages/graph-engine/src/nodes/logic/not.ts
@@ -1,8 +1,8 @@
 import { AnySchema, BooleanSchema } from '../../schemas/index.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 
-export default class NodeDefinition<T> extends Node {
+export default class NodeDefinition<T> extends DataflowNode {
 	static title = 'Logical Not';
 	static type = 'studio.tokens.logic.not';
 	static description = 'Not node allows you to negate a boolean value.';
@@ -17,10 +17,10 @@ export default class NodeDefinition<T> extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('value', {
+		this.dataflow.addInput('value', {
 			type: AnySchema
 		});
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: BooleanSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/logic/or.ts b/packages/graph-engine/src/nodes/logic/or.ts
index 4bcf6e524..2223f05da 100644
--- a/packages/graph-engine/src/nodes/logic/or.ts
+++ b/packages/graph-engine/src/nodes/logic/or.ts
@@ -3,10 +3,10 @@ import {
 	BooleanSchema,
 	createVariadicSchema
 } from '../../schemas/index.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 
-export default class NodeDefinition<T = any> extends Node {
+export default class NodeDefinition<T = any> extends DataflowNode {
 	static title = 'Logical or';
 	static type = 'studio.tokens.logic.or';
 	static description = 'OR node allows you to check if all inputs are true.';
@@ -21,14 +21,14 @@ export default class NodeDefinition<T = any> extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('inputs', {
+		this.dataflow.addInput('inputs', {
 			type: {
 				...createVariadicSchema(AnySchema),
 				default: []
 			},
 			variadic: true
 		});
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: BooleanSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/logic/switch.ts b/packages/graph-engine/src/nodes/logic/switch.ts
index 15441423f..050e3726e 100644
--- a/packages/graph-engine/src/nodes/logic/switch.ts
+++ b/packages/graph-engine/src/nodes/logic/switch.ts
@@ -1,7 +1,8 @@
 import { AnySchema, StringSchema } from '../../schemas/index.js';
-import { INodeDefinition, Node } from '../../programmatic/node.js';
-import { ToInput } from '../../programmatic/input.js';
-import { ToOutput } from '../../programmatic/output.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
+import { INodeDefinition } from '../../programmatic/nodes/node.js';
+import { ToInput } from '../../programmatic/dataflow/input.js';
+import { ToOutput } from '../../programmatic/dataflow/output.js';
 import { annotatedDynamicInputs } from '../../annotations/index.js';
 
 /**
@@ -22,7 +23,7 @@ import { annotatedDynamicInputs } from '../../annotations/index.js';
  *
  * ```
  */
-export default class NodeDefinition<T> extends Node {
+export default class NodeDefinition<T> extends DataflowNode {
 	static title = 'Switch';
 	static type = 'studio.tokens.logic.switch';
 	static description =
@@ -41,15 +42,15 @@ export default class NodeDefinition<T> extends Node {
 
 		this.annotations[annotatedDynamicInputs] = true;
 
-		this.addInput('default', {
+		this.dataflow.addInput('default', {
 			type: AnySchema
 		});
 
-		this.addInput('condition', {
+		this.dataflow.addInput('condition', {
 			type: StringSchema
 		});
 
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: AnySchema
 		});
 	}
@@ -59,8 +60,8 @@ export default class NodeDefinition<T> extends Node {
 		const defaultVal = this.inputs.default;
 
 		//Check if an input matches the condition
-		if (this.inputs[condition as keyof typeof this.inputs]) {
-			const input = this.inputs[condition as keyof typeof this.inputs];
+		if (this.inputs[condition]) {
+			const input = this.inputs[condition];
 			this.outputs.value.set(input.value, input.type);
 			return;
 		}
diff --git a/packages/graph-engine/src/nodes/math/abs.ts b/packages/graph-engine/src/nodes/math/abs.ts
index 92c002dba..8e84a1f25 100644
--- a/packages/graph-engine/src/nodes/math/abs.ts
+++ b/packages/graph-engine/src/nodes/math/abs.ts
@@ -1,5 +1,5 @@
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 import { NumberSchema } from '../../schemas/index.js';
 
 /**
@@ -9,7 +9,7 @@ import { NumberSchema } from '../../schemas/index.js';
  * {"nodes":[{"id":"9cfd3826-4570-493c-a672-ed8b642ed537","type":"studio.tokens.math.abs","inputs":[{"name":"input","value":-100,"type":{"$id":"https://schemas.tokens.studio/number.json","title":"Number","type":"number"},"visible":true}],"annotations":{"ui.position.x":444.45137532552087,"ui.position.y":215.06712849934894}},{"id":"0a1e0778-47b0-423d-8d21-57230bd84b6d","type":"studio.tokens.generic.constant","inputs":[{"name":"value","value":-100,"type":{"$id":"https://schemas.tokens.studio/any.json","title":"Any"},"dynamicType":{"$id":"https://schemas.tokens.studio/number.json","title":"Number","type":"number"},"annotations":{"ui.resetable":true}}],"annotations":{"ui.position.x":53.11804199218744,"ui.position.y":214.4004618326823}}],"edges":[{"id":"f076c4f6-536c-4ddc-bfee-6b658eab3036","source":"0a1e0778-47b0-423d-8d21-57230bd84b6d","sourceHandle":"value","target":"9cfd3826-4570-493c-a672-ed8b642ed537","targetHandle":"input"}],"annotations":{"engine.id":"81cead46-1d98-478a-adcc-074d90c81f9f","engine.capabilities.web-audio":"0.0.0","engine.capabilities.fs":"0.0.0","engine.version":"0.12.0","ui.viewport":{"x":145.0460710070189,"y":146.7716604603002,"zoom":1.1023008602108806},"ui.version":"2.9.4"}}
  * ```
  */
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Absolute';
 	static type = 'studio.tokens.math.abs';
 	static description =
@@ -24,10 +24,10 @@ export default class NodeDefinition extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('input', {
+		this.dataflow.addInput('input', {
 			type: NumberSchema
 		});
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: NumberSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/math/add.ts b/packages/graph-engine/src/nodes/math/add.ts
index 7d4f2e94a..7223396ed 100644
--- a/packages/graph-engine/src/nodes/math/add.ts
+++ b/packages/graph-engine/src/nodes/math/add.ts
@@ -1,5 +1,5 @@
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 import { NumberSchema } from '../../schemas/index.js';
 
 /**
@@ -9,7 +9,7 @@ import { NumberSchema } from '../../schemas/index.js';
  * {"nodes":[{"id":"dad17632-5b26-4583-b3ea-03c5567be7f4","type":"studio.tokens.math.add","inputs":[{"name":"a","value":5,"type":{"$id":"https://schemas.tokens.studio/number.json","title":"Number","type":"number"},"visible":true},{"name":"b","value":2,"type":{"$id":"https://schemas.tokens.studio/number.json","title":"Number","type":"number"},"visible":true}],"annotations":{"ui.position.x":575,"ui.position.y":108}},{"id":"741ab9e6-1ef2-4e8b-afb6-a16bfc155f49","type":"studio.tokens.generic.constant","inputs":[{"name":"value","value":5,"type":{"$id":"https://schemas.tokens.studio/any.json","title":"Any"},"dynamicType":{"$id":"https://schemas.tokens.studio/number.json","title":"Number","type":"number"},"annotations":{"ui.resetable":true}}],"annotations":{"ui.position.x":173,"ui.position.y":194.16666666666669}},{"id":"7552b3dd-cb1f-4ddc-945e-6f5942c771a6","type":"studio.tokens.generic.constant","inputs":[{"name":"value","value":2,"type":{"$id":"https://schemas.tokens.studio/any.json","title":"Any"},"dynamicType":{"$id":"https://schemas.tokens.studio/number.json","title":"Number","type":"number"},"annotations":{"ui.resetable":true}}],"annotations":{"ui.position.x":173,"ui.position.y":194.16666666666669}}],"edges":[{"id":"81092f62-40b0-4fa8-acb2-d7096953a794","source":"741ab9e6-1ef2-4e8b-afb6-a16bfc155f49","sourceHandle":"value","target":"dad17632-5b26-4583-b3ea-03c5567be7f4","targetHandle":"a"},{"id":"19a46899-78ca-4e65-8b7a-b5af30b59e4a","source":"7552b3dd-cb1f-4ddc-945e-6f5942c771a6","sourceHandle":"value","target":"dad17632-5b26-4583-b3ea-03c5567be7f4","targetHandle":"b"}],"annotations":{"engine.id":"25df5d50-c097-444d-941e-8152a443927b","engine.capabilities.web-audio":"0.0.0","engine.capabilities.fs":"0.0.0","engine.version":"0.12.0","ui.viewport":{"x":10.228731796548118,"y":221.02227938493957,"zoom":1.1023008602108806},"ui.version":"2.9.4"}}
  * ```
  */
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Add';
 	static type = 'studio.tokens.math.add';
 	static description = 'Add node allows you to add two numbers.';
@@ -22,13 +22,13 @@ export default class NodeDefinition extends Node {
 	}>;
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('a', {
+		this.dataflow.addInput('a', {
 			type: NumberSchema
 		});
-		this.addInput('b', {
+		this.dataflow.addInput('b', {
 			type: NumberSchema
 		});
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: NumberSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/math/addVariadic.ts b/packages/graph-engine/src/nodes/math/addVariadic.ts
index 6b0c4c0ef..1e2279307 100644
--- a/packages/graph-engine/src/nodes/math/addVariadic.ts
+++ b/packages/graph-engine/src/nodes/math/addVariadic.ts
@@ -1,5 +1,5 @@
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 import { NumberSchema, createVariadicSchema } from '../../schemas/index.js';
 
 /**
@@ -9,7 +9,7 @@ import { NumberSchema, createVariadicSchema } from '../../schemas/index.js';
  * {"nodes":[{"id":"69cba311-a27f-4809-8fe4-496d42486c08","type":"studio.tokens.math.addVariadic","inputs":[{"name":"inputs","value":[42,3],"type":{"title":"Number[]","type":"array","items":{"$id":"https://schemas.tokens.studio/number.json","title":"Number","type":"number"},"default":[]},"variadic":true,"visible":true}],"annotations":{"ui.position.x":385.11804199218744,"ui.position.y":160.4004618326823}},{"id":"ec280cbe-bc87-4bff-9cbc-530e511e3cac","type":"studio.tokens.generic.constant","inputs":[{"name":"value","value":42,"type":{"$id":"https://schemas.tokens.studio/any.json","title":"Any"},"dynamicType":{"$id":"https://schemas.tokens.studio/number.json","title":"Number","type":"number"},"annotations":{"ui.resetable":true}}],"annotations":{"ui.position.x":-22.8819580078125,"ui.position.y":359.7337951660156}},{"id":"75487ffd-7671-44a7-88b4-71798cdebf8c","type":"studio.tokens.generic.constant","inputs":[{"name":"value","value":3,"type":{"$id":"https://schemas.tokens.studio/any.json","title":"Any"},"dynamicType":{"$id":"https://schemas.tokens.studio/number.json","title":"Number","type":"number"},"annotations":{"ui.resetable":true}}],"annotations":{"ui.position.x":-22.8819580078125,"ui.position.y":359.7337951660156}},{"id":"9e3bf536-f1ff-49d3-9291-d8ec91dfe916","type":"studio.tokens.generic.constant","inputs":[{"name":"value","value":6,"type":{"$id":"https://schemas.tokens.studio/any.json","title":"Any"},"dynamicType":{"$id":"https://schemas.tokens.studio/number.json","title":"Number","type":"number"},"annotations":{"ui.resetable":true}}],"annotations":{"ui.position.x":-22.8819580078125,"ui.position.y":359.7337951660156}},{"id":"d28e91e4-918f-4928-8221-c33b7fd81ce2","type":"studio.tokens.generic.note","inputs":[],"annotations":{"ui.position.x":136.36369921737844,"ui.position.y":-14.385675110158786,"ui.nodeType":"studio.tokens.generic.note","ui.description":"Try connect the last constant to the `inputs +` handle."}}],"edges":[{"id":"b0c3194a-7817-4724-b51b-aca20af7c2c9","source":"ec280cbe-bc87-4bff-9cbc-530e511e3cac","sourceHandle":"value","target":"69cba311-a27f-4809-8fe4-496d42486c08","targetHandle":"inputs","annotations":{"engine.index":0}},{"id":"ad6e165c-7514-44b1-90f9-9d21df4720cc","source":"75487ffd-7671-44a7-88b4-71798cdebf8c","sourceHandle":"value","target":"69cba311-a27f-4809-8fe4-496d42486c08","targetHandle":"inputs","annotations":{"engine.index":1}}],"annotations":{"engine.id":"f4a6a09d-0550-414f-a183-389a7d241402","engine.capabilities.web-audio":"0.0.0","engine.capabilities.fs":"0.0.0","engine.version":"0.12.0","ui.viewport":{"x":175.36324003942718,"y":143.45803479766573,"zoom":1.1023008602108806},"ui.version":"2.9.4"}}
  * ```
  */
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Add Node (Variadic)';
 	static type = 'studio.tokens.math.addVariadic';
 	static description = 'Add node allows you to add two or more numbers.';
@@ -23,14 +23,14 @@ export default class NodeDefinition extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('inputs', {
+		this.dataflow.addInput('inputs', {
 			type: {
 				...createVariadicSchema(NumberSchema),
 				default: []
 			},
 			variadic: true
 		});
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: NumberSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/math/ceil.ts b/packages/graph-engine/src/nodes/math/ceil.ts
index f7eed2022..b9fec0cdc 100644
--- a/packages/graph-engine/src/nodes/math/ceil.ts
+++ b/packages/graph-engine/src/nodes/math/ceil.ts
@@ -1,8 +1,8 @@
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 import { NumberSchema } from '../../schemas/index.js';
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Ceil';
 	static type = 'studio.tokens.math.ceil';
 	static description =
@@ -17,11 +17,11 @@ export default class NodeDefinition extends Node {
 	}>;
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('value', {
+		this.dataflow.addInput('value', {
 			type: NumberSchema
 		});
 
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: NumberSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/math/clamp.ts b/packages/graph-engine/src/nodes/math/clamp.ts
index 2551fe5f2..2c080911f 100644
--- a/packages/graph-engine/src/nodes/math/clamp.ts
+++ b/packages/graph-engine/src/nodes/math/clamp.ts
@@ -1,8 +1,8 @@
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 import { NumberSchema } from '../../schemas/index.js';
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Clamp';
 	static type = 'studio.tokens.math.clamp';
 	static description =
@@ -19,25 +19,25 @@ export default class NodeDefinition extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('value', {
+		this.dataflow.addInput('value', {
 			type: {
 				...NumberSchema,
 				default: 0
 			}
 		});
-		this.addInput('min', {
+		this.dataflow.addInput('min', {
 			type: {
 				...NumberSchema,
 				default: 0
 			}
 		});
-		this.addInput('max', {
+		this.dataflow.addInput('max', {
 			type: {
 				...NumberSchema,
 				default: 0
 			}
 		});
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: NumberSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/math/cos.ts b/packages/graph-engine/src/nodes/math/cos.ts
index 9eb7dcb2c..b4333d396 100644
--- a/packages/graph-engine/src/nodes/math/cos.ts
+++ b/packages/graph-engine/src/nodes/math/cos.ts
@@ -1,8 +1,8 @@
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 import { NumberSchema } from '../../schemas/index.js';
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Cosine';
 	static type = 'studio.tokens.math.cos';
 	static description = 'Cos node allows you to get the cosine of a number.';
@@ -16,13 +16,13 @@ export default class NodeDefinition extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('value', {
+		this.dataflow.addInput('value', {
 			type: {
 				...NumberSchema,
 				default: 0
 			}
 		});
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: NumberSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/math/count.ts b/packages/graph-engine/src/nodes/math/count.ts
index fd165c2ed..4bbc05f52 100644
--- a/packages/graph-engine/src/nodes/math/count.ts
+++ b/packages/graph-engine/src/nodes/math/count.ts
@@ -1,9 +1,9 @@
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
 
 import { AnyArraySchema, NumberSchema } from '../../schemas/index.js';
-import { Node } from '../../programmatic/node.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Count';
 	static type = 'studio.tokens.math.count';
 	static description = 'Counts the amount of items in an array.';
@@ -17,10 +17,10 @@ export default class NodeDefinition extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('value', {
+		this.dataflow.addInput('value', {
 			type: AnyArraySchema
 		});
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: NumberSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/math/divide.ts b/packages/graph-engine/src/nodes/math/divide.ts
index 9ea8dd6cd..3a9612cb3 100644
--- a/packages/graph-engine/src/nodes/math/divide.ts
+++ b/packages/graph-engine/src/nodes/math/divide.ts
@@ -1,8 +1,8 @@
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 import { NumberSchema } from '../../schemas/index.js';
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Divide';
 	static type = 'studio.tokens.math.divide';
 	static description = 'Divide node allows you to divide two numbers.';
@@ -15,13 +15,13 @@ export default class NodeDefinition extends Node {
 	}>;
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('a', {
+		this.dataflow.addInput('a', {
 			type: NumberSchema
 		});
-		this.addInput('b', {
+		this.dataflow.addInput('b', {
 			type: NumberSchema
 		});
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: NumberSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/math/divideVariadic.ts b/packages/graph-engine/src/nodes/math/divideVariadic.ts
index 543e5b15b..f91d018e5 100644
--- a/packages/graph-engine/src/nodes/math/divideVariadic.ts
+++ b/packages/graph-engine/src/nodes/math/divideVariadic.ts
@@ -1,8 +1,8 @@
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 import { NumberSchema, createVariadicSchema } from '../../schemas/index.js';
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Divide (Variadic)';
 	static type = 'studio.tokens.math.divideVariadic';
 	static description = 'Divide node allows you to divide two or more numbers.';
@@ -15,14 +15,14 @@ export default class NodeDefinition extends Node {
 	}>;
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('inputs', {
+		this.dataflow.addInput('inputs', {
 			type: {
 				...createVariadicSchema(NumberSchema),
 				default: []
 			},
 			variadic: true
 		});
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: NumberSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/math/eval.ts b/packages/graph-engine/src/nodes/math/eval.ts
index 8aa9d034e..9f98ed01b 100644
--- a/packages/graph-engine/src/nodes/math/eval.ts
+++ b/packages/graph-engine/src/nodes/math/eval.ts
@@ -1,11 +1,12 @@
-import { INodeDefinition, Node } from '../../programmatic/node.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
+import { INodeDefinition } from '../../programmatic/nodes/node.js';
 import { NumberSchema, StringSchema } from '../../schemas/index.js';
 import { Parser } from 'expr-eval';
-import { ToInput } from '../../programmatic/input.js';
-import { ToOutput } from '../../programmatic/output.js';
+import { ToInput } from '../../programmatic/dataflow/input.js';
+import { ToOutput } from '../../programmatic/dataflow/output.js';
 import { annotatedDynamicInputs } from '../../annotations/index.js';
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Evaluate math';
 	static type = 'studio.tokens.math.eval';
 	static description = 'Allows you to evaluate arbitrary math expressions';
@@ -18,7 +19,6 @@ export default class NodeDefinition extends Node {
 		}>;
 
 	declare outputs: ToOutput<{
-		expression: string;
 		value: number;
 	}>;
 
@@ -26,16 +26,16 @@ export default class NodeDefinition extends Node {
 		super(props);
 
 		this.annotations[annotatedDynamicInputs] = true;
-		this.addInput('expression', {
+		this.dataflow.addInput('expression', {
 			type: StringSchema
 		});
 
 		//We expect users to expose the variables they want to use in the expression as inputs
 
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: NumberSchema
 		});
-		this.addOutput('expression', {
+		this.dataflow.addOutput('expression', {
 			type: StringSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/math/exp.ts b/packages/graph-engine/src/nodes/math/exp.ts
index c22722490..32f4a24b5 100644
--- a/packages/graph-engine/src/nodes/math/exp.ts
+++ b/packages/graph-engine/src/nodes/math/exp.ts
@@ -1,8 +1,8 @@
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 import { NumberSchema } from '../../schemas/index.js';
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Exponentiation';
 	static type = 'studio.tokens.math.exponent';
 	static description =
@@ -17,10 +17,10 @@ export default class NodeDefinition extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('exponent', {
+		this.dataflow.addInput('exponent', {
 			type: NumberSchema
 		});
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: NumberSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/math/floor.ts b/packages/graph-engine/src/nodes/math/floor.ts
index 2d17a831d..fb72b42ce 100644
--- a/packages/graph-engine/src/nodes/math/floor.ts
+++ b/packages/graph-engine/src/nodes/math/floor.ts
@@ -1,9 +1,9 @@
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 
 import { NumberSchema } from '../../schemas/index.js';
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Floor';
 	static type = 'studio.tokens.math.floor';
 	static description =
@@ -19,11 +19,11 @@ export default class NodeDefinition extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('value', {
+		this.dataflow.addInput('value', {
 			type: NumberSchema
 		});
 
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: NumberSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/math/fluid.ts b/packages/graph-engine/src/nodes/math/fluid.ts
index 8205953a9..3a16b360c 100644
--- a/packages/graph-engine/src/nodes/math/fluid.ts
+++ b/packages/graph-engine/src/nodes/math/fluid.ts
@@ -1,9 +1,9 @@
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 import { NumberSchema } from '../../schemas/index.js';
 import { setToPrecision } from '../../utils/precision.js';
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Fluid';
 	static type = 'studio.tokens.math.fluid';
 	static description =
@@ -23,42 +23,42 @@ export default class NodeDefinition extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('minSize', {
+		this.dataflow.addInput('minSize', {
 			type: {
 				...NumberSchema,
 				default: 16,
 				description: 'Minimum size in pixels'
 			}
 		});
-		this.addInput('maxSize', {
+		this.dataflow.addInput('maxSize', {
 			type: {
 				...NumberSchema,
 				default: 24,
 				description: 'Maximum size in pixels'
 			}
 		});
-		this.addInput('minViewport', {
+		this.dataflow.addInput('minViewport', {
 			type: {
 				...NumberSchema,
 				default: 320,
 				description: 'Minimum viewport width in pixels'
 			}
 		});
-		this.addInput('maxViewport', {
+		this.dataflow.addInput('maxViewport', {
 			type: {
 				...NumberSchema,
 				default: 1920,
 				description: 'Maximum viewport width in pixels'
 			}
 		});
-		this.addInput('viewport', {
+		this.dataflow.addInput('viewport', {
 			type: {
 				...NumberSchema,
 				default: 768,
 				description: 'Current viewport width in pixels'
 			}
 		});
-		this.addInput('precision', {
+		this.dataflow.addInput('precision', {
 			type: {
 				...NumberSchema,
 				default: 2,
@@ -66,7 +66,7 @@ export default class NodeDefinition extends Node {
 				description: 'Number of decimal places in the output'
 			}
 		});
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: NumberSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/math/lerp.ts b/packages/graph-engine/src/nodes/math/lerp.ts
index a6aea6380..9ab250bbc 100644
--- a/packages/graph-engine/src/nodes/math/lerp.ts
+++ b/packages/graph-engine/src/nodes/math/lerp.ts
@@ -1,8 +1,8 @@
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 import { NumberSchema } from '../../schemas/index.js';
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Lerp';
 	static type = 'studio.tokens.math.lerp';
 	static description =
@@ -20,25 +20,25 @@ export default class NodeDefinition extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('a', {
+		this.dataflow.addInput('a', {
 			type: {
 				...NumberSchema,
 				default: 0
 			}
 		});
-		this.addInput('b', {
+		this.dataflow.addInput('b', {
 			type: {
 				...NumberSchema,
 				default: 0
 			}
 		});
-		this.addInput('t', {
+		this.dataflow.addInput('t', {
 			type: {
 				...NumberSchema,
 				default: 0
 			}
 		});
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: NumberSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/math/mod.ts b/packages/graph-engine/src/nodes/math/mod.ts
index c844af212..a8c637cb4 100644
--- a/packages/graph-engine/src/nodes/math/mod.ts
+++ b/packages/graph-engine/src/nodes/math/mod.ts
@@ -1,8 +1,8 @@
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 import { NumberSchema } from '../../schemas/index.js';
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Modulo';
 	static type = 'studio.tokens.math.mod';
 	static description =
@@ -17,13 +17,13 @@ export default class NodeDefinition extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('a', {
+		this.dataflow.addInput('a', {
 			type: NumberSchema
 		});
-		this.addInput('b', {
+		this.dataflow.addInput('b', {
 			type: NumberSchema
 		});
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: NumberSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/math/multiply.ts b/packages/graph-engine/src/nodes/math/multiply.ts
index 11b09a3c6..4bd716888 100644
--- a/packages/graph-engine/src/nodes/math/multiply.ts
+++ b/packages/graph-engine/src/nodes/math/multiply.ts
@@ -1,8 +1,8 @@
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 import { NumberSchema } from '../../schemas/index.js';
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Multiply';
 	static type = 'studio.tokens.math.multiply';
 	static description = 'Multiply node allows you to multiply two  numbers.';
@@ -16,13 +16,13 @@ export default class NodeDefinition extends Node {
 	}>;
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('a', {
+		this.dataflow.addInput('a', {
 			type: NumberSchema
 		});
-		this.addInput('b', {
+		this.dataflow.addInput('b', {
 			type: NumberSchema
 		});
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: NumberSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/math/multiplyVariadic.ts b/packages/graph-engine/src/nodes/math/multiplyVariadic.ts
index 48506f719..08ab30299 100644
--- a/packages/graph-engine/src/nodes/math/multiplyVariadic.ts
+++ b/packages/graph-engine/src/nodes/math/multiplyVariadic.ts
@@ -1,8 +1,8 @@
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 import { NumberSchema, createVariadicSchema } from '../../schemas/index.js';
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Multiply (Variadic)';
 	static type = 'studio.tokens.math.multiplyVariadic';
 	static description =
@@ -16,14 +16,14 @@ export default class NodeDefinition extends Node {
 	}>;
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('inputs', {
+		this.dataflow.addInput('inputs', {
 			type: {
 				...createVariadicSchema(NumberSchema),
 				default: []
 			},
 			variadic: true
 		});
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: NumberSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/math/pow.ts b/packages/graph-engine/src/nodes/math/pow.ts
index 85ac4eda9..daea980ca 100644
--- a/packages/graph-engine/src/nodes/math/pow.ts
+++ b/packages/graph-engine/src/nodes/math/pow.ts
@@ -1,8 +1,8 @@
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 import { NumberSchema } from '../../schemas/index.js';
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Power';
 	static type = 'studio.tokens.math.pow';
 	static description =
@@ -18,16 +18,16 @@ export default class NodeDefinition extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('base', {
+		this.dataflow.addInput('base', {
 			type: NumberSchema
 		});
-		this.addInput('exponent', {
+		this.dataflow.addInput('exponent', {
 			type: {
 				...NumberSchema,
 				default: 2
 			}
 		});
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: NumberSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/math/random.ts b/packages/graph-engine/src/nodes/math/random.ts
index f069c544a..0c953c3e4 100644
--- a/packages/graph-engine/src/nodes/math/random.ts
+++ b/packages/graph-engine/src/nodes/math/random.ts
@@ -1,8 +1,8 @@
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 import { NumberSchema } from '../../schemas/index.js';
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Random';
 	static type = 'studio.tokens.math.random';
 	static description =
@@ -14,7 +14,7 @@ export default class NodeDefinition extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: {
 				...NumberSchema,
 				default: Math.random()
diff --git a/packages/graph-engine/src/nodes/math/rangeMapping.ts b/packages/graph-engine/src/nodes/math/rangeMapping.ts
index bb8460b89..fc4994454 100644
--- a/packages/graph-engine/src/nodes/math/rangeMapping.ts
+++ b/packages/graph-engine/src/nodes/math/rangeMapping.ts
@@ -1,10 +1,11 @@
 // src/nodes/math/dataMapping.ts
 
 import { BooleanSchema, NumberSchema } from '../../schemas/index.js';
-import { INodeDefinition, Node } from '../../programmatic/node.js';
-import { ToInput, ToOutput } from '../../programmatic/index.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
+import { INodeDefinition } from '../../programmatic/nodes/node.js';
+import { ToInput, ToOutput } from '@/programmatic/index.js';
 
-export default class RangeMappingNode extends Node {
+export default class RangeMappingNode extends DataflowNode {
 	static title = 'Range Mapping';
 	static type = 'studio.tokens.math.dataMapping';
 	static description = 'Maps a value from one range to another';
@@ -25,44 +26,44 @@ export default class RangeMappingNode extends Node {
 	constructor(props: INodeDefinition) {
 		super(props);
 
-		this.addInput('inputValue', {
+		this.dataflow.addInput('inputValue', {
 			type: {
 				...NumberSchema,
 				default: 5
 			}
 		});
-		this.addInput('inputMin', {
+		this.dataflow.addInput('inputMin', {
 			type: {
 				...NumberSchema,
 				default: 0
 			}
 		});
-		this.addInput('inputMax', {
+		this.dataflow.addInput('inputMax', {
 			type: {
 				...NumberSchema,
 				default: 100
 			}
 		});
-		this.addInput('outputMin', {
+		this.dataflow.addInput('outputMin', {
 			type: {
 				...NumberSchema,
 				default: 0
 			}
 		});
-		this.addInput('outputMax', {
+		this.dataflow.addInput('outputMax', {
 			type: {
 				...NumberSchema,
 				default: 1
 			}
 		});
-		this.addInput('clamp', {
+		this.dataflow.addInput('clamp', {
 			type: {
 				...BooleanSchema,
 				default: true
 			}
 		});
 
-		this.addOutput('mappedValue', {
+		this.dataflow.addOutput('mappedValue', {
 			type: NumberSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/math/round.ts b/packages/graph-engine/src/nodes/math/round.ts
index 79dc31493..61f74570c 100644
--- a/packages/graph-engine/src/nodes/math/round.ts
+++ b/packages/graph-engine/src/nodes/math/round.ts
@@ -1,9 +1,9 @@
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 import { NumberSchema } from '../../schemas/index.js';
 import { setToPrecision } from '../../utils/precision.js';
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Round';
 	static type = 'studio.tokens.math.round';
 	static description =
@@ -19,20 +19,20 @@ export default class NodeDefinition extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('value', {
+		this.dataflow.addInput('value', {
 			type: {
 				...NumberSchema,
 				default: 0
 			}
 		});
-		this.addInput('precision', {
+		this.dataflow.addInput('precision', {
 			type: {
 				...NumberSchema,
 				default: 0
 			}
 		});
 
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: NumberSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/math/sin.ts b/packages/graph-engine/src/nodes/math/sin.ts
index 68bac9499..3f66dc4c8 100644
--- a/packages/graph-engine/src/nodes/math/sin.ts
+++ b/packages/graph-engine/src/nodes/math/sin.ts
@@ -1,8 +1,8 @@
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 import { NumberSchema } from '../../schemas/index.js';
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Sine';
 	static type = 'studio.tokens.math.sin';
 	static description = 'Sin node allows you to get the sin of a number.';
@@ -16,13 +16,13 @@ export default class NodeDefinition extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('value', {
+		this.dataflow.addInput('value', {
 			type: {
 				...NumberSchema,
 				default: 0
 			}
 		});
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: NumberSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/math/sqrt.ts b/packages/graph-engine/src/nodes/math/sqrt.ts
index c800690ae..c4bca5aec 100644
--- a/packages/graph-engine/src/nodes/math/sqrt.ts
+++ b/packages/graph-engine/src/nodes/math/sqrt.ts
@@ -1,8 +1,8 @@
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 import { NumberSchema } from '../../schemas/index.js';
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Square Root';
 	static type = 'studio.tokens.math.sqrt';
 	static description =
@@ -17,10 +17,10 @@ export default class NodeDefinition extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('radicand', {
+		this.dataflow.addInput('radicand', {
 			type: NumberSchema
 		});
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: NumberSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/math/subtract.ts b/packages/graph-engine/src/nodes/math/subtract.ts
index 93e0db9a3..515b1abe4 100644
--- a/packages/graph-engine/src/nodes/math/subtract.ts
+++ b/packages/graph-engine/src/nodes/math/subtract.ts
@@ -1,8 +1,8 @@
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 import { NumberSchema } from '../../schemas/index.js';
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Subtract';
 	static type = 'studio.tokens.math.subtract';
 	static description = 'Allows you to subtract two numbers.';
@@ -16,13 +16,13 @@ export default class NodeDefinition extends Node {
 	}>;
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('a', {
+		this.dataflow.addInput('a', {
 			type: NumberSchema
 		});
-		this.addInput('b', {
+		this.dataflow.addInput('b', {
 			type: NumberSchema
 		});
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: NumberSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/math/subtractVariadic.ts b/packages/graph-engine/src/nodes/math/subtractVariadic.ts
index b8a50f7eb..c9181a02c 100644
--- a/packages/graph-engine/src/nodes/math/subtractVariadic.ts
+++ b/packages/graph-engine/src/nodes/math/subtractVariadic.ts
@@ -1,8 +1,8 @@
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 import { NumberSchema, createVariadicSchema } from '../../schemas/index.js';
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Subtract (Variadic)';
 	static type = 'studio.tokens.math.subtractVariadic';
 	static description = 'Allows you to subtract two or more numbers.';
@@ -16,14 +16,14 @@ export default class NodeDefinition extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('inputs', {
+		this.dataflow.addInput('inputs', {
 			type: {
 				...createVariadicSchema(NumberSchema),
 				default: []
 			},
 			variadic: true
 		});
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: NumberSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/math/tan.ts b/packages/graph-engine/src/nodes/math/tan.ts
index cfb131c9e..7ecd71ded 100644
--- a/packages/graph-engine/src/nodes/math/tan.ts
+++ b/packages/graph-engine/src/nodes/math/tan.ts
@@ -1,8 +1,8 @@
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 import { NumberSchema } from '../../schemas/index.js';
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Tan';
 	static type = 'studio.tokens.math.tan';
 	static description = 'Tan node allows you to get the sin of a number.';
@@ -15,13 +15,13 @@ export default class NodeDefinition extends Node {
 	}>;
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('value', {
+		this.dataflow.addInput('value', {
 			type: {
 				...NumberSchema,
 				default: 0
 			}
 		});
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: NumberSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/network/anthropic.ts b/packages/graph-engine/src/nodes/network/anthropic.ts
new file mode 100644
index 000000000..6959fbd47
--- /dev/null
+++ b/packages/graph-engine/src/nodes/network/anthropic.ts
@@ -0,0 +1,88 @@
+import {
+	ControlFlow,
+	IControlFlowNode
+} from '@/programmatic/nodes/controlflow.js';
+import {
+	Dataflow,
+	IDataflowNode,
+	INodeDefinition,
+	StringSchema,
+	ToInput,
+	annotatedNodeRunning
+} from '../../index.js';
+import { Node } from '../../programmatic/nodes/node.js';
+import { ToControlInput } from '@/programmatic/controlflow/input.js';
+import { ToControlOutput } from '@/programmatic/controlflow/output.js';
+import axios from 'axios';
+
+/**
+ * A node that passes through the input to the output.
+ */
+export default class NodeDefinition
+	extends Node
+	implements IControlFlowNode, IDataflowNode
+{
+	controlflow = new ControlFlow(this);
+	dataflow = new Dataflow(this);
+
+	static title = 'Anthropic';
+	static type = 'studio.tokens.network.anthropic';
+	static description = 'Does a call to the Anthropic API';
+
+	declare inputs: ToControlInput<{
+		message: string;
+	}> &
+		ToInput<{
+			apiKey: string;
+			model: string;
+		}>;
+	declare outputs: ToControlOutput<{
+		value: string;
+	}>;
+
+	_interval: NodeJS.Timer | null = null;
+	constructor(props: INodeDefinition) {
+		super(props);
+
+		this.dataflow.addInput('apiKey', {
+			type: StringSchema
+		});
+
+		this.dataflow.addInput('model', {
+			type: {
+				...StringSchema,
+				default: 'claude-3-opus-20240229'
+			}
+		});
+
+		this.controlflow.addInput('message', async msg => {
+			const { model, apiKey } = this.getAllInputs();
+
+			this.setAnnotation(annotatedNodeRunning, true);
+			const res = await axios.post(
+				'https://api.anthropic.com/v1/messages',
+				{
+					model,
+					max_tokens: 1024,
+					messages: [{ role: 'user', content: msg }]
+				},
+				{
+					headers: {
+						'Access-Control-Allow-Origin': '*',
+						'x-api-key': apiKey,
+						'anthropic-version': '2023-06-01',
+						'content-type': 'application/json'
+					}
+				}
+			);
+			this.setAnnotation(annotatedNodeRunning, false);
+
+			this.outputs.value.trigger(res.data.content[0].text, StringSchema);
+		});
+
+		this.controlflow.addOutput('value', {
+			type: StringSchema
+		});
+	}
+	execute() {}
+}
diff --git a/packages/graph-engine/src/nodes/network/delay.ts b/packages/graph-engine/src/nodes/network/delay.ts
new file mode 100644
index 000000000..4aa40ae29
--- /dev/null
+++ b/packages/graph-engine/src/nodes/network/delay.ts
@@ -0,0 +1,62 @@
+import {
+	ControlFlow,
+	IControlFlowNode
+} from '@/programmatic/nodes/controlflow.js';
+import {
+	Dataflow,
+	IDataflowNode,
+	INodeDefinition,
+	NumberSchema,
+	ToInput
+} from '../../index.js';
+import { Node } from '../../programmatic/nodes/node.js';
+import { ToControlInput } from '@/programmatic/controlflow/input.js';
+import { ToControlOutput } from '@/programmatic/controlflow/output.js';
+
+/**
+ * A node that passes through the input to the output.
+ */
+export default class NodeDefinition<T>
+	extends Node
+	implements IControlFlowNode, IDataflowNode
+{
+	controlflow = new ControlFlow(this);
+	dataflow = new Dataflow(this);
+
+	static title = 'Delay';
+	static type = 'studio.tokens.network.delay';
+	static description =
+		'When trigger, it will output the provided value after a delay';
+
+	declare inputs: ToControlInput<{
+		value: T;
+	}> &
+		ToInput<{
+			/**
+			 * The delay in milliseconds
+			 * @default 1000
+			 */
+			delay: number;
+		}>;
+	declare outputs: ToControlOutput<{
+		value: T;
+	}>;
+
+	_interval: NodeJS.Timer | null = null;
+	constructor(props: INodeDefinition) {
+		super(props);
+
+		this.dataflow.addInput('delay', {
+			type: NumberSchema
+		});
+
+		this.controlflow.addInput('value', (val, type) => {
+			setTimeout(() => {
+				this.outputs.value.trigger(val, type);
+			}, this.inputs.delay.value);
+		});
+
+		this.controlflow.addOutput('value');
+	}
+	execute() {}
+}
diff --git a/packages/graph-engine/src/nodes/network/fetchJson.ts b/packages/graph-engine/src/nodes/network/fetchJson.ts
new file mode 100644
index 000000000..d99bf82cf
--- /dev/null
+++ b/packages/graph-engine/src/nodes/network/fetchJson.ts
@@ -0,0 +1,55 @@
+import {
+	ControlFlow,
+	IControlFlowNode
+} from '@/programmatic/nodes/controlflow.js';
+import {
+	Dataflow,
+	IDataflowNode,
+	INodeDefinition,
+	ObjectSchema,
+	StringSchema,
+	ToInput
+} from '../../index.js';
+import { Node } from '../../programmatic/nodes/node.js';
+import { ToControlInput } from '@/programmatic/controlflow/input.js';
+import { ToControlOutput } from '@/programmatic/controlflow/output.js';
+import axios from 'axios';
+
+/**
+ * A node that passes through the input to the output.
+ */
+export default class NodeDefinition
+	extends Node
+	implements IControlFlowNode, IDataflowNode
+{
+	controlflow = new ControlFlow(this);
+	dataflow = new Dataflow(this);
+
+	static title = 'Fetch Json';
+	static type = 'studio.tokens.network.fetchJson';
+	static description = 'Fetches a JSON value from the internet';
+
+	declare inputs: ToControlInput<{
+		trigger: any;
+	}> &
+		ToInput<{
+			uri: string;
+		}>;
+	declare outputs: ToControlOutput<{
+		value: any;
+	}>;
+	constructor(props: INodeDefinition) {
+		super(props);
+
+		this.dataflow.addInput('uri', {
+			type: StringSchema
+		});
+
+		this.controlflow.addInput('trigger', async () => {
+			const response = await axios.get(this.inputs.uri.value);
+			this.outputs.value.trigger(response.data, ObjectSchema);
+		});
+		this.controlflow.addOutput('value');
+	}
+	execute() {}
+}
diff --git a/packages/graph-engine/src/nodes/network/hold.ts b/packages/graph-engine/src/nodes/network/hold.ts
new file mode 100644
index 000000000..3ac6c06a6
--- /dev/null
+++ b/packages/graph-engine/src/nodes/network/hold.ts
@@ -0,0 +1,47 @@
+import {
+	AnySchema,
+	Dataflow,
+	IDataflowNode,
+	INodeDefinition,
+	ToOutput
+} from '../../index.js';
+import {
+	ControlFlow,
+	IControlFlowNode
+} from '@/programmatic/nodes/controlflow.js';
+import { Node } from '../../programmatic/nodes/node.js';
+import { ToControlInput } from '@/programmatic/controlflow/input.js';
+
+/**
+ * A node that passes through the input to the output.
+ */
+export default class NodeDefinition<T>
+	extends Node
+	implements IControlFlowNode, IDataflowNode
+{
+	controlflow = new ControlFlow(this);
+	dataflow = new Dataflow(this);
+
+	static title = 'Hold';
+	static type = 'studio.tokens.network.hold';
+	static description = 'Holds a message and makes it available for dataflow';
+
+	declare inputs: ToControlInput<{
+		value: T;
+	}>;
+	declare outputs: ToOutput<{
+		value: T;
+	}>;
+
+	_interval: NodeJS.Timer | null = null;
+	constructor(props: INodeDefinition) {
+		super(props);
+		this.controlflow.addInput('value', (val, type) => {
+			this.outputs.value.set(val, type);
+			//Trigger the dataflow so it knows it can update
+			this.dataflow.run();
+		});
+		this.dataflow.addOutput('value', { type: AnySchema });
+	}
+	execute() {}
+}
diff --git a/packages/graph-engine/src/nodes/network/index.ts b/packages/graph-engine/src/nodes/network/index.ts
new file mode 100644
index 000000000..7484ff625
--- /dev/null
+++ b/packages/graph-engine/src/nodes/network/index.ts
@@ -0,0 +1,19 @@
+import anthropic from './anthropic.js';
+import delay from './delay.js';
+import fetchJson from './fetchJson.js';
+import hold from './hold.js';
+import passthrough from './passthrough.js';
+import start from './start.js';
+import time from './time.js';
+import toMessage from './toMessage.js';
+
+export const nodes = [
+	anthropic,
+	delay,
+	fetchJson,
+	hold,
+	start,
+	toMessage,
+	passthrough,
+	time
+];
diff --git a/packages/graph-engine/src/nodes/network/passthrough.ts b/packages/graph-engine/src/nodes/network/passthrough.ts
new file mode 100644
index 000000000..f9bab07bf
--- /dev/null
+++ b/packages/graph-engine/src/nodes/network/passthrough.ts
@@ -0,0 +1,26 @@
+import { ControlFlowNode, INodeDefinition } from '../../index.js';
+import { ToControlInput } from '../../programmatic/controlflow/input.js';
+import { ToControlOutput } from '../../programmatic/controlflow/output.js';
+
+/**
+ * A node that passes through the input to the output.
+ */
+export default class NodeDefinition<T> extends ControlFlowNode {
+	static title = 'Passthrough Message';
+	static type = 'studio.tokens.network.passthrough';
+	static description = 'Passes a value through to the output';
+
+	declare inputs: ToControlInput<{
+		value: T;
+	}>;
+	declare outputs: ToControlOutput<{
+		value: T;
+	}>;
+	constructor(props: INodeDefinition) {
+		super(props);
+		this.controlflow.addInput<T>('value', (val, type) => {
+			this.outputs.value.trigger(val, type);
+		});
+		this.controlflow.addOutput('value');
+	}
+}
diff --git a/packages/graph-engine/src/nodes/network/start.ts b/packages/graph-engine/src/nodes/network/start.ts
new file mode 100644
index 000000000..9c7bb8aa1
--- /dev/null
+++ b/packages/graph-engine/src/nodes/network/start.ts
@@ -0,0 +1,24 @@
+import { ControlFlowNode, INodeDefinition } from '../../index.js';
+import { ToControlOutput } from '../../programmatic/controlflow/output.js';
+
+/**
+ * A node that passes through the input to the output.
+ */
+export default class NodeDefinition extends ControlFlowNode {
+	static title = 'Start';
+	static type = 'studio.tokens.network.start';
+	static description = 'Sends a pulse whenever the graph is started';
+
+	declare outputs: ToControlOutput<{
+		trigger: number;
+	}>;
+	constructor(props: INodeDefinition) {
+		super(props);
+		this.controlflow.addOutput('trigger');
+		this.controlflow.onStart = () => {
+			this.outputs.trigger.trigger(Date.now());
+		};
+		//We do not resume , we only trigger on start
+		this.controlflow.onResume = () => {};
+	}
+}
diff --git a/packages/graph-engine/src/nodes/network/time.ts b/packages/graph-engine/src/nodes/network/time.ts
new file mode 100644
index 000000000..9c5bc9df5
--- /dev/null
+++ b/packages/graph-engine/src/nodes/network/time.ts
@@ -0,0 +1,46 @@
+import { ControlFlowNode } from '@/programmatic/nodes/controlflow.js';
+import {
+	ControlFlowOutput,
+	ToControlOutput
+} from '@/programmatic/controlflow/output.js';
+import { INodeDefinition, NumberSchema } from '../../index.js';
+
+/**
+ * A node that returns the current time each tick in seconds since the Unix epoch.
+ * When the node is started, it will update the time every second.
+ */
+export default class NodeDefinition extends ControlFlowNode {
+	static title = 'Time';
+	static type = 'studio.tokens.network.time';
+	static description =
+		'Provides the current time each tick once the graph is started';
+
+	declare outputs: ToControlOutput<{
+		value: number;
+	}>;
+
+	_interval: NodeJS.Timeout | null = null;
+	constructor(props: INodeDefinition) {
+		super(props);
+
+		this.controlflow.onStart = () => {
+			if (this._interval) {
+				clearInterval(this._interval);
+			}
+			this._interval = setInterval(() => {
+				this.outputs.value.trigger(Date.now());
+			}, 1000);
+		};
+		this.controlflow.onStop = () => {
+			if (this._interval) {
+				clearInterval(this._interval);
+			}
+		};
+
+		this.outputs.value = new ControlFlowOutput({
+			name: 'value',
+			node: this,
+			type: NumberSchema
+		});
+	}
+}
diff --git a/packages/graph-engine/src/nodes/network/toMessage.ts b/packages/graph-engine/src/nodes/network/toMessage.ts
new file mode 100644
index 000000000..d11167f8f
--- /dev/null
+++ b/packages/graph-engine/src/nodes/network/toMessage.ts
@@ -0,0 +1,58 @@
+import {
+	AnySchema,
+	Dataflow,
+	IDataflowNode,
+	INodeDefinition,
+	ToInput
+} from '../../index.js';
+import {
+	ControlFlow,
+	IControlFlowNode
+} from '@/programmatic/nodes/controlflow.js';
+import { Node } from '../../programmatic/nodes/node.js';
+import { ToControlInput } from '@/programmatic/controlflow/input.js';
+import { ToControlOutput } from '@/programmatic/controlflow/output.js';
+
+/**
+ * A node that passes through the input to the output.
+ */
+export default class NodeDefinition<T>
+	extends Node
+	implements IControlFlowNode, IDataflowNode
+{
+	controlflow = new ControlFlow(this);
+	dataflow = new Dataflow(this);
+
+	static title = 'To message';
+	static type = 'studio.tokens.network.toMsg';
+	static description =
+		'When triggered, it will take the dataflow input and pass it to the controlflow output';
+
+	declare inputs: ToControlInput<{
+		trigger: void;
+	}> &
+		ToInput<{
+			value: T;
+		}>;
+	declare outputs: ToControlOutput<{
+		value: T;
+	}>;
+
+	constructor(props: INodeDefinition) {
+		super(props);
+
+		this.dataflow.addInput('value', {
+			type: AnySchema
+		});
+
+		this.controlflow.addInput('trigger', () => {
+			this.outputs.value.trigger(
+				this.inputs.value.value,
+				this.inputs.value.type
+			);
+		});
+
+		this.controlflow.addOutput('value');
+	}
+	execute() {}
+}
diff --git a/packages/graph-engine/src/nodes/preview/colorCompare.ts b/packages/graph-engine/src/nodes/preview/colorCompare.ts
index 60c519537..e6378a3f3 100644
--- a/packages/graph-engine/src/nodes/preview/colorCompare.ts
+++ b/packages/graph-engine/src/nodes/preview/colorCompare.ts
@@ -1,9 +1,9 @@
 import { Color } from '../../types.js';
-import { ColorSchema } from '../../schemas/index.js';
-import { Node } from '../../programmatic/node.js';
+import { ColorSchema } from '../../schemas';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { ToInput } from '../../index.js';
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Color Compare';
 	static type = 'studio.tokens.preview.colorCompare';
 	static description = 'Compares colors';
@@ -16,14 +16,14 @@ export default class NodeDefinition extends Node {
 	constructor(props) {
 		super(props);
 
-		this.addInput('colorA', {
+		this.dataflow.addInput('colorA', {
 			type: {
 				...ColorSchema,
 				default: '#ffffff'
 			}
 		});
 
-		this.addInput('colorB', {
+		this.dataflow.addInput('colorB', {
 			type: {
 				...ColorSchema,
 				default: '#000000'
diff --git a/packages/graph-engine/src/nodes/preview/colorScale.ts b/packages/graph-engine/src/nodes/preview/colorScale.ts
index 9f461de32..c07059fba 100644
--- a/packages/graph-engine/src/nodes/preview/colorScale.ts
+++ b/packages/graph-engine/src/nodes/preview/colorScale.ts
@@ -1,8 +1,8 @@
 import { ColorSchema } from '../../schemas/index.js';
-import { Node } from '../../programmatic/node.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { arrayOf } from '../../schemas/utils.js';
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Color Scale';
 	static type = 'studio.tokens.preview.colorScale';
 
@@ -11,7 +11,7 @@ export default class NodeDefinition extends Node {
 	constructor(props) {
 		super(props);
 
-		this.addInput('value', {
+		this.dataflow.addInput('value', {
 			type: arrayOf(ColorSchema)
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/preview/curve.ts b/packages/graph-engine/src/nodes/preview/curve.ts
index f807e4a49..c20ebed76 100644
--- a/packages/graph-engine/src/nodes/preview/curve.ts
+++ b/packages/graph-engine/src/nodes/preview/curve.ts
@@ -1,7 +1,7 @@
 import { CurveSchema } from '../../schemas/index.js';
-import { Node } from '../../programmatic/node.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'PreviewCurve';
 	static type = 'studio.tokens.preview.curve';
 
@@ -10,7 +10,7 @@ export default class NodeDefinition extends Node {
 	constructor(props) {
 		super(props);
 
-		this.addInput('value', {
+		this.dataflow.addInput('value', {
 			type: CurveSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/preview/mathExpression.ts b/packages/graph-engine/src/nodes/preview/mathExpression.ts
index d91f318a7..aa1318bec 100644
--- a/packages/graph-engine/src/nodes/preview/mathExpression.ts
+++ b/packages/graph-engine/src/nodes/preview/mathExpression.ts
@@ -1,20 +1,16 @@
-import { Node } from '../../programmatic/node.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { StringSchema } from '../../schemas/index.js';
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Math Expression';
 	static type = 'studio.tokens.preview.mathExpression';
 
-	static description = 'Visualize a math expression';
-
-	static annotations: Record<string, unknown> = {
-		deprecated: true
-	};
+	static description = 'Visuaize a math expression';
 
 	constructor(props) {
 		super(props);
 
-		this.addInput('value', {
+		this.dataflow.addInput('value', {
 			type: StringSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/preview/number.ts b/packages/graph-engine/src/nodes/preview/number.ts
index 9b546bbc5..88b8dd55b 100644
--- a/packages/graph-engine/src/nodes/preview/number.ts
+++ b/packages/graph-engine/src/nodes/preview/number.ts
@@ -1,7 +1,7 @@
-import { Node } from '../../programmatic/node.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { NumberSchema } from '../../schemas/index.js';
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Number';
 	static type = 'studio.tokens.preview.number';
 
@@ -10,11 +10,11 @@ export default class NodeDefinition extends Node {
 	constructor(props) {
 		super(props);
 
-		this.addInput('value', {
+		this.dataflow.addInput('value', {
 			type: { ...NumberSchema, default: 0 }
 		});
 
-		this.addInput('precision', {
+		this.dataflow.addInput('precision', {
 			type: { ...NumberSchema, default: 2 }
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/preview/swatch.ts b/packages/graph-engine/src/nodes/preview/swatch.ts
index 64e2b79fb..41421a3fb 100644
--- a/packages/graph-engine/src/nodes/preview/swatch.ts
+++ b/packages/graph-engine/src/nodes/preview/swatch.ts
@@ -1,7 +1,7 @@
 import { ColorSchema } from '../../schemas/index.js';
-import { Node } from '../../programmatic/node.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Color Swatch';
 	static type = 'studio.tokens.preview.swatch';
 
@@ -10,7 +10,7 @@ export default class NodeDefinition extends Node {
 	constructor(props) {
 		super(props);
 
-		this.addInput('value', {
+		this.dataflow.addInput('value', {
 			type: ColorSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/secret/retrieve.ts b/packages/graph-engine/src/nodes/secret/retrieve.ts
index 478d157e1..a9365532c 100644
--- a/packages/graph-engine/src/nodes/secret/retrieve.ts
+++ b/packages/graph-engine/src/nodes/secret/retrieve.ts
@@ -1,8 +1,8 @@
-import { Node } from '../../programmatic/node.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { SecretCapability } from '../../capabilities/secret.js';
 import { StringSchema } from '../../schemas/index.js';
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Retrieve Secret';
 	static type = 'studio.tokens.secret.retrieve';
 
@@ -16,13 +16,13 @@ export default class NodeDefinition extends Node {
 	constructor(props) {
 		super(props);
 
-		this.addInput('secret', {
+		this.dataflow.addInput('secret', {
 			type: StringSchema
 		});
-		this.addInput('key', {
+		this.dataflow.addInput('key', {
 			type: StringSchema
 		});
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: StringSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/series/arithmetic.ts b/packages/graph-engine/src/nodes/series/arithmetic.ts
index 387aa9271..b16e31fce 100644
--- a/packages/graph-engine/src/nodes/series/arithmetic.ts
+++ b/packages/graph-engine/src/nodes/series/arithmetic.ts
@@ -1,6 +1,7 @@
-import { INodeDefinition, Node } from '../../programmatic/node.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
+import { INodeDefinition } from '../../programmatic/nodes/node.js';
 import { NumberSchema } from '../../schemas/index.js';
-import { ToInput } from '../../programmatic/input.js';
+import { ToInput } from '../../programmatic/dataflow/input.js';
 import { ToOutput } from '../../programmatic/index.js';
 import { arrayOf } from '../../schemas/utils.js';
 import { setToPrecision } from '../../utils/precision.js';
@@ -9,7 +10,7 @@ export type ArithemeticValue = {
 	value: number;
 };
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Arithmetic Series';
 
 	declare inputs: ToInput<{
@@ -30,21 +31,21 @@ export default class NodeDefinition extends Node {
 		'Generates an arithmetic f(n)= c + (f(n-1)) series of numbers based on the base value, steps down, steps and increment.';
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('base', {
+		this.dataflow.addInput('base', {
 			type: {
 				...NumberSchema,
 				default: 16
 			},
 			visible: true
 		});
-		this.addInput('stepsDown', {
+		this.dataflow.addInput('stepsDown', {
 			type: {
 				...NumberSchema,
 				default: 0
 			},
 			visible: true
 		});
-		this.addInput('stepsUp', {
+		this.dataflow.addInput('stepsUp', {
 			type: {
 				...NumberSchema,
 				default: 1
@@ -52,23 +53,23 @@ export default class NodeDefinition extends Node {
 			visible: true
 		});
 
-		this.addInput('increment', {
+		this.dataflow.addInput('increment', {
 			type: {
 				...NumberSchema,
 				default: 1
 			}
 		});
 
-		this.addInput('precision', {
+		this.dataflow.addInput('precision', {
 			type: {
 				...NumberSchema,
 				default: 2
 			}
 		});
-		this.addOutput('array', {
+		this.dataflow.addOutput('array', {
 			type: arrayOf(NumberSchema)
 		});
-		this.addOutput('indexed', {
+		this.dataflow.addOutput('indexed', {
 			type: {
 				$id: `https://schemas.tokens.studio/studio.tokens.series.arithmetic/indexed.json`,
 				type: 'object',
diff --git a/packages/graph-engine/src/nodes/series/geometric.ts b/packages/graph-engine/src/nodes/series/geometric.ts
index 6b35cb223..62e0592dc 100644
--- a/packages/graph-engine/src/nodes/series/geometric.ts
+++ b/packages/graph-engine/src/nodes/series/geometric.ts
@@ -1,5 +1,5 @@
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 import { NumberSchema } from '../../schemas/index.js';
 import { arrayOf } from '../../schemas/utils.js';
 import { setToPrecision } from '../../utils/precision.js';
@@ -9,7 +9,7 @@ type GeometricValue = {
 	value: number;
 };
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Geometric Series';
 	static type = 'studio.tokens.series.geometric';
 	static description =
@@ -30,42 +30,42 @@ export default class NodeDefinition extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('base', {
+		this.dataflow.addInput('base', {
 			type: {
 				...NumberSchema,
 				default: 16
 			}
 		});
-		this.addInput('stepsDown', {
+		this.dataflow.addInput('stepsDown', {
 			type: {
 				...NumberSchema,
 				default: 0
 			}
 		});
-		this.addInput('stepsUp', {
+		this.dataflow.addInput('stepsUp', {
 			type: {
 				...NumberSchema,
 				default: 1
 			}
 		});
 
-		this.addInput('ratio', {
+		this.dataflow.addInput('ratio', {
 			type: {
 				...NumberSchema,
 				default: 1.5
 			}
 		});
 
-		this.addInput('precision', {
+		this.dataflow.addInput('precision', {
 			type: {
 				...NumberSchema,
 				default: 2
 			}
 		});
-		this.addOutput('array', {
+		this.dataflow.addOutput('array', {
 			type: arrayOf(NumberSchema)
 		});
-		this.addOutput('indexed', {
+		this.dataflow.addOutput('indexed', {
 			type: {
 				$id: `https://schemas.tokens.studio/studio.tokens.series.geometric/indexed.json`,
 				type: 'object',
diff --git a/packages/graph-engine/src/nodes/series/harmonic.ts b/packages/graph-engine/src/nodes/series/harmonic.ts
index 7ae499667..77bf2b5ba 100644
--- a/packages/graph-engine/src/nodes/series/harmonic.ts
+++ b/packages/graph-engine/src/nodes/series/harmonic.ts
@@ -1,5 +1,5 @@
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 import { NumberSchema } from '../../schemas/index.js';
 import { arrayOf } from '../../schemas/utils.js';
 import { setToPrecision } from '../../utils/precision.js';
@@ -9,7 +9,7 @@ type HarmonicValue = {
 	value: number;
 };
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Harmonic Series';
 	static type = 'studio.tokens.series.harmonic';
 	static description =
@@ -32,48 +32,48 @@ export default class NodeDefinition extends Node {
 	constructor(props: INodeDefinition) {
 		super(props);
 
-		this.addInput('base', {
+		this.dataflow.addInput('base', {
 			type: {
 				...NumberSchema,
 				default: 16
 			}
 		});
-		this.addInput('stepsDown', {
+		this.dataflow.addInput('stepsDown', {
 			type: {
 				...NumberSchema,
 				default: 0
 			}
 		});
-		this.addInput('stepsUp', {
+		this.dataflow.addInput('stepsUp', {
 			type: {
 				...NumberSchema,
 				default: 5
 			}
 		});
-		this.addInput('notes', {
+		this.dataflow.addInput('notes', {
 			type: {
 				...NumberSchema,
 				default: 5
 			}
 		});
 
-		this.addInput('ratio', {
+		this.dataflow.addInput('ratio', {
 			type: {
 				...NumberSchema,
 				default: 2
 			}
 		});
 
-		this.addInput('precision', {
+		this.dataflow.addInput('precision', {
 			type: {
 				...NumberSchema,
 				default: 2
 			}
 		});
-		this.addOutput('array', {
+		this.dataflow.addOutput('array', {
 			type: arrayOf(NumberSchema)
 		});
-		this.addOutput('indexed', {
+		this.dataflow.addOutput('indexed', {
 			type: {
 				$id: `https://schemas.tokens.studio/studio.tokens.series.harmonic/indexed.json`,
 				type: 'object',
diff --git a/packages/graph-engine/src/nodes/string/interpolate.ts b/packages/graph-engine/src/nodes/string/interpolate.ts
index fbf800349..edc826f01 100644
--- a/packages/graph-engine/src/nodes/string/interpolate.ts
+++ b/packages/graph-engine/src/nodes/string/interpolate.ts
@@ -1,11 +1,10 @@
-// src/nodes/string/interpolate.ts
-
-import { INodeDefinition, Node } from '../../programmatic/node.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
+import { INodeDefinition } from '../../programmatic/nodes/node.js';
 import { StringSchema } from '../../schemas/index.js';
-import { ToInput, ToOutput } from '../../programmatic/index.js';
+import { ToInput, ToOutput } from '../../programmatic';
 import { annotatedDynamicInputs } from '../../annotations/index.js';
 
-export default class StringInterpolationNode extends Node {
+export default class StringInterpolationNode extends DataflowNode {
 	static title = 'Interpolation';
 	static type = 'studio.tokens.string.interpolate';
 	static description = 'Interpolates a string with provided values';
@@ -26,11 +25,11 @@ export default class StringInterpolationNode extends Node {
 
 		this.annotations[annotatedDynamicInputs] = true;
 
-		this.addInput('template', {
+		this.dataflow.addInput('template', {
 			type: StringSchema
 		});
 
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: StringSchema
 		});
 	}
@@ -52,7 +51,7 @@ export default class StringInterpolationNode extends Node {
 			this.outputs.value.set(interpolatedString);
 		} catch (error) {
 			this.error = new Error(
-				`Error during string interpolation: ${(error as Error).message}`
+				`Error during string interpolation: ${error.message}`
 			);
 		}
 	}
diff --git a/packages/graph-engine/src/nodes/string/join.ts b/packages/graph-engine/src/nodes/string/join.ts
index cb2b63a9a..8101d0112 100644
--- a/packages/graph-engine/src/nodes/string/join.ts
+++ b/packages/graph-engine/src/nodes/string/join.ts
@@ -1,7 +1,7 @@
 import { AnyArraySchema, StringSchema } from '../../schemas/index.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
-export default class NodeDefinition<T> extends Node {
+export default class NodeDefinition<T> extends DataflowNode {
 	static title = 'Join Array';
 	static type = 'studio.tokens.string.join';
 
@@ -18,16 +18,16 @@ export default class NodeDefinition<T> extends Node {
 		'Join node allows you to join an array into a string using a delimiter.';
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('array', {
+		this.dataflow.addInput('array', {
 			type: AnyArraySchema
 		});
-		this.addInput('delimiter', {
+		this.dataflow.addInput('delimiter', {
 			type: {
 				...StringSchema,
 				default: '-'
 			}
 		});
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: StringSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/string/lowercase.ts b/packages/graph-engine/src/nodes/string/lowercase.ts
index 430e78c91..99e024c06 100644
--- a/packages/graph-engine/src/nodes/string/lowercase.ts
+++ b/packages/graph-engine/src/nodes/string/lowercase.ts
@@ -1,11 +1,11 @@
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 import { StringSchema } from '../../schemas/index.js';
 
 /**
  * This node converts a string to lowercase
  */
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Lowercase';
 	static type = 'studio.tokens.string.lowercase';
 	static description = 'Converts a string to lowercase';
@@ -19,10 +19,10 @@ export default class NodeDefinition extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('value', {
+		this.dataflow.addInput('value', {
 			type: StringSchema
 		});
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: StringSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/string/pad.ts b/packages/graph-engine/src/nodes/string/pad.ts
index 890e93b86..37e725618 100644
--- a/packages/graph-engine/src/nodes/string/pad.ts
+++ b/packages/graph-engine/src/nodes/string/pad.ts
@@ -1,5 +1,5 @@
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 import { NumberSchema, StringSchema } from '../../schemas/index.js';
 
 export enum Position {
@@ -10,7 +10,7 @@ export enum Position {
 /**
  * This node pads a string to a given length
  */
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Pad';
 	static type = 'studio.tokens.string.pad';
 	static description = 'Pads a string to a given length';
@@ -27,23 +27,23 @@ export default class NodeDefinition extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('string', {
+		this.dataflow.addInput('string', {
 			type: StringSchema
 		});
-		this.addInput('length', {
+		this.dataflow.addInput('length', {
 			type: NumberSchema
 		});
-		this.addInput('character', {
+		this.dataflow.addInput('character', {
 			type: StringSchema
 		});
-		this.addInput('position', {
+		this.dataflow.addInput('position', {
 			type: {
 				...StringSchema,
 				enum: [Position.START, Position.END],
 				default: Position.START
 			}
 		});
-		this.addOutput('string', {
+		this.dataflow.addOutput('string', {
 			type: StringSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/string/regex.ts b/packages/graph-engine/src/nodes/string/regex.ts
index 6ea790276..9639850f6 100644
--- a/packages/graph-engine/src/nodes/string/regex.ts
+++ b/packages/graph-engine/src/nodes/string/regex.ts
@@ -1,8 +1,8 @@
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 import { StringSchema } from '../../schemas/index.js';
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Regex';
 	static type = 'studio.tokens.string.regex';
 	static description = 'Replaces a string with a regex';
@@ -22,28 +22,28 @@ export default class NodeDefinition extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('input', {
+		this.dataflow.addInput('input', {
 			type: StringSchema
 		});
-		this.addInput('match', {
+		this.dataflow.addInput('match', {
 			type: {
 				...StringSchema,
 				default: ''
 			}
 		});
-		this.addInput('flags', {
+		this.dataflow.addInput('flags', {
 			type: {
 				...StringSchema,
 				default: ''
 			}
 		});
-		this.addInput('replace', {
+		this.dataflow.addInput('replace', {
 			type: {
 				...StringSchema,
 				default: ''
 			}
 		});
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: StringSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/string/split.ts b/packages/graph-engine/src/nodes/string/split.ts
index a405bb376..bb49eacec 100644
--- a/packages/graph-engine/src/nodes/string/split.ts
+++ b/packages/graph-engine/src/nodes/string/split.ts
@@ -1,10 +1,11 @@
-import { INodeDefinition, Node } from '../../programmatic/node.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
+import { INodeDefinition } from '../../programmatic/nodes/node.js';
 import { StringSchema } from '../../schemas/index.js';
-import { ToInput } from '../../programmatic/input.js';
+import { ToInput } from '../../programmatic/dataflow/input.js';
 import { ToOutput } from '../../programmatic/index.js';
 import { arrayOf } from '../../schemas/utils.js';
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Split String';
 	static type = 'studio.tokens.string.split';
 	declare inputs: ToInput<{
@@ -12,21 +13,21 @@ export default class NodeDefinition extends Node {
 		separator: string;
 	}>;
 	declare outputs: ToOutput<{
-		value: string[];
+		value: string;
 	}>;
 	static description = 'Converts a string to lowercase';
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('value', {
+		this.dataflow.addInput('value', {
 			type: StringSchema
 		});
-		this.addInput('separator', {
+		this.dataflow.addInput('separator', {
 			type: {
 				...StringSchema,
 				default: ','
 			}
 		});
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: arrayOf(StringSchema)
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/string/stringify.ts b/packages/graph-engine/src/nodes/string/stringify.ts
index 4f9c2422a..97f600aff 100644
--- a/packages/graph-engine/src/nodes/string/stringify.ts
+++ b/packages/graph-engine/src/nodes/string/stringify.ts
@@ -1,8 +1,8 @@
 import { AnySchema, StringSchema } from '../../schemas/index.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Stringify';
 	static type = 'studio.tokens.string.stringify';
 	static description = 'Converts a value to a string';
@@ -16,10 +16,10 @@ export default class NodeDefinition extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('value', {
+		this.dataflow.addInput('value', {
 			type: AnySchema
 		});
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: StringSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/string/uppercase.ts b/packages/graph-engine/src/nodes/string/uppercase.ts
index 0a55c6e89..828322002 100644
--- a/packages/graph-engine/src/nodes/string/uppercase.ts
+++ b/packages/graph-engine/src/nodes/string/uppercase.ts
@@ -1,8 +1,8 @@
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 import { StringSchema } from '../../schemas/index.js';
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Uppercase';
 	static type = 'studio.tokens.string.uppercase';
 	static description = 'Converts a string to uppercase';
@@ -16,10 +16,10 @@ export default class NodeDefinition extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('value', {
+		this.dataflow.addInput('value', {
 			type: StringSchema
 		});
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: StringSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/typing/assertDefined.ts b/packages/graph-engine/src/nodes/typing/assertDefined.ts
index 9c296ccb9..ff28486a7 100644
--- a/packages/graph-engine/src/nodes/typing/assertDefined.ts
+++ b/packages/graph-engine/src/nodes/typing/assertDefined.ts
@@ -1,7 +1,7 @@
 import { AnySchema } from '../../schemas/index.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Assert defined';
 	static type = 'studio.tokens.typing.assertDefined';
 	static description = 'Asserts that a value is defined';
@@ -17,10 +17,10 @@ export default class NodeDefinition extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('value', {
+		this.dataflow.addInput('value', {
 			type: AnySchema
 		});
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: AnySchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/typing/hasValue.ts b/packages/graph-engine/src/nodes/typing/hasValue.ts
index b689fa53e..e1d5841a8 100644
--- a/packages/graph-engine/src/nodes/typing/hasValue.ts
+++ b/packages/graph-engine/src/nodes/typing/hasValue.ts
@@ -1,8 +1,8 @@
 import { AnySchema, BooleanSchema } from '../../schemas/index.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 
-export default class NodeDefinition<T> extends Node {
+export default class NodeDefinition<T> extends DataflowNode {
 	static title = 'Has Value';
 	static type = 'studio.tokens.typing.hasValue';
 	static description =
@@ -17,11 +17,11 @@ export default class NodeDefinition<T> extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('value', {
+		this.dataflow.addInput('value', {
 			type: AnySchema
 		});
 
-		this.addOutput('undefined', {
+		this.dataflow.addOutput('undefined', {
 			type: BooleanSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/typing/parseUnit.ts b/packages/graph-engine/src/nodes/typing/parseUnit.ts
index 5add2c5be..70a16134d 100644
--- a/packages/graph-engine/src/nodes/typing/parseUnit.ts
+++ b/packages/graph-engine/src/nodes/typing/parseUnit.ts
@@ -1,9 +1,9 @@
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 import { NumberSchema, StringSchema } from '../../schemas/index.js';
 import valueParser from 'postcss-value-parser-esm';
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Parse unit';
 	static type = 'studio.tokens.typing.parseUnit';
 	static description =
@@ -21,13 +21,13 @@ export default class NodeDefinition extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('value', {
+		this.dataflow.addInput('value', {
 			type: StringSchema
 		});
-		this.addOutput('unit', {
+		this.dataflow.addOutput('unit', {
 			type: StringSchema
 		});
-		this.addOutput('number', {
+		this.dataflow.addOutput('number', {
 			type: NumberSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/typing/passUnit.ts b/packages/graph-engine/src/nodes/typing/passUnit.ts
index 941c29678..375d122e3 100644
--- a/packages/graph-engine/src/nodes/typing/passUnit.ts
+++ b/packages/graph-engine/src/nodes/typing/passUnit.ts
@@ -1,11 +1,12 @@
 import valueParser from 'postcss-value-parser-esm';
 
-import { INodeDefinition, Node } from '../../programmatic/node.js';
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
+import { INodeDefinition } from '../../programmatic/nodes/node.js';
 import { StringSchema } from '../../schemas/index.js';
 import { ToInput } from '../../programmatic/input.js';
 import { ToOutput } from '../../programmatic/output.js';
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Pass unit';
 	static type = 'studio.tokens.typing.passUnit';
 	declare inputs: ToInput<{
@@ -18,16 +19,16 @@ export default class NodeDefinition extends Node {
 	static description = "Adds a unit to a value if it doesn't already have one";
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('value', {
+		this.dataflow.addInput('value', {
 			type: StringSchema
 		});
-		this.addInput('fallback', {
+		this.dataflow.addInput('fallback', {
 			type: {
 				...StringSchema,
 				default: 'px'
 			}
 		});
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: StringSchema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/typography/baseFontSize.ts b/packages/graph-engine/src/nodes/typography/baseFontSize.ts
index 7834e22a5..1966ed0ed 100644
--- a/packages/graph-engine/src/nodes/typography/baseFontSize.ts
+++ b/packages/graph-engine/src/nodes/typography/baseFontSize.ts
@@ -1,9 +1,9 @@
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 import { NumberSchema } from '../../schemas/index.js';
 import { setToPrecision } from '../../utils/precision.js';
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Base Font Size';
 	static type = 'studio.tokens.typography.baseFontSize';
 
@@ -30,58 +30,58 @@ export default class NodeDefinition extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('visualAcuity', {
+		this.dataflow.addInput('visualAcuity', {
 			type: {
 				...NumberSchema,
 				default: 0.7
 			}
 		});
-		this.addInput('correctionFactor', {
+		this.dataflow.addInput('correctionFactor', {
 			type: {
 				...NumberSchema,
 				default: 13
 			}
 		});
-		this.addInput('lightingCondition', {
+		this.dataflow.addInput('lightingCondition', {
 			type: {
 				...NumberSchema,
 				default: 0.83
 			}
 		});
-		this.addInput('distance', {
+		this.dataflow.addInput('distance', {
 			type: {
 				...NumberSchema,
 				default: 30
 			}
 		});
 
-		this.addInput('xHeightRatio', {
+		this.dataflow.addInput('xHeightRatio', {
 			type: {
 				...NumberSchema,
 				default: 0.53
 			}
 		});
 
-		this.addInput('ppi', {
+		this.dataflow.addInput('ppi', {
 			type: {
 				...NumberSchema,
 				default: 458
 			}
 		});
-		this.addInput('pixelDensity', {
+		this.dataflow.addInput('pixelDensity', {
 			type: {
 				...NumberSchema,
 				default: 3
 			}
 		});
-		this.addInput('precision', {
+		this.dataflow.addInput('precision', {
 			type: {
 				...NumberSchema,
 				default: 0
 			}
 		});
 
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: {
 				...NumberSchema,
 				description: 'The generated font size'
diff --git a/packages/graph-engine/src/nodes/vector2/create.ts b/packages/graph-engine/src/nodes/vector2/create.ts
index 5cd0bf0cf..b4874a8e0 100644
--- a/packages/graph-engine/src/nodes/vector2/create.ts
+++ b/packages/graph-engine/src/nodes/vector2/create.ts
@@ -1,9 +1,9 @@
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 import { NumberSchema, Vec2Schema } from '../../schemas/index.js';
 import { Vec2 } from '../../index.js';
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Create vector2';
 	static type = 'studio.tokens.vector2.create';
 	static description = 'Allows you to create a vector2';
@@ -20,13 +20,13 @@ export default class NodeDefinition extends Node {
 	constructor(props: INodeDefinition) {
 		super(props);
 
-		this.addInput('x', {
+		this.dataflow.addInput('x', {
 			type: NumberSchema
 		});
-		this.addInput('y', {
+		this.dataflow.addInput('y', {
 			type: NumberSchema
 		});
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: Vec2Schema
 		});
 	}
diff --git a/packages/graph-engine/src/nodes/vector2/destructure.ts b/packages/graph-engine/src/nodes/vector2/destructure.ts
index f2748986c..04c0441f6 100644
--- a/packages/graph-engine/src/nodes/vector2/destructure.ts
+++ b/packages/graph-engine/src/nodes/vector2/destructure.ts
@@ -1,9 +1,9 @@
+import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
-import { Node } from '../../programmatic/node.js';
 import { NumberSchema, Vec2Schema } from '../../schemas/index.js';
 import { Vec2 } from '../../index.js';
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Destructure vector2';
 	static type = 'studio.tokens.vector2.destructure';
 	static description =
@@ -20,13 +20,13 @@ export default class NodeDefinition extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('value', {
+		this.dataflow.addInput('value', {
 			type: Vec2Schema
 		});
-		this.addOutput('x', {
+		this.dataflow.addOutput('x', {
 			type: NumberSchema
 		});
-		this.addOutput('y', {
+		this.dataflow.addOutput('y', {
 			type: NumberSchema
 		});
 	}
diff --git a/packages/graph-engine/src/programmatic/annotated.ts b/packages/graph-engine/src/programmatic/annotated.ts
new file mode 100644
index 000000000..cccf54a52
--- /dev/null
+++ b/packages/graph-engine/src/programmatic/annotated.ts
@@ -0,0 +1,22 @@
+import { action, makeObservable, observable } from 'mobx';
+
+export interface IAnnotated {
+	annotations?: Record<string, any>;
+}
+
+export class Annotated {
+	// Used to store arbitrary meta data. Most commonly used in the UI
+	public annotations = {} as Record<string, any>;
+
+	constructor(props: IAnnotated) {
+		this.annotations = props.annotations || {};
+
+		makeObservable(this, {
+			annotations: observable.shallow,
+			setAnnotation: action
+		});
+	}
+	setAnnotation(key: string, value: unknown) {
+		this.annotations[key] = value;
+	}
+}
diff --git a/packages/graph-engine/src/programmatic/controlflow/base.ts b/packages/graph-engine/src/programmatic/controlflow/base.ts
new file mode 100644
index 000000000..290f066a6
--- /dev/null
+++ b/packages/graph-engine/src/programmatic/controlflow/base.ts
@@ -0,0 +1,39 @@
+import { AnySchema, GraphSchema } from '@/schemas/index.js';
+import { ControlFlowNode } from '../nodes/controlflow.js';
+import { IPort, Port } from '../port.js';
+import type { Node, TypeDefinition } from '../index.js';
+
+export const CONTROL_PORT = 1;
+
+export interface IControlflowPort<T extends Node = Node> extends IPort<T> {
+	type?: GraphSchema;
+}
+
+export class ControlFlowPort<
+	T extends ControlFlowNode = ControlFlowNode
+> extends Port<T> {
+	//Note that we need null values for the observable to work
+	protected _dynamicType?: GraphSchema = null;
+	protected _type: GraphSchema;
+
+	pType = CONTROL_PORT;
+	constructor(props: IControlflowPort<T>) {
+		super(props);
+		this._type = props.type || AnySchema;
+	}
+	fullType(): TypeDefinition {
+		return {
+			type: this._type,
+			visible: this.visible,
+			variadic: this.variadic
+		};
+	}
+
+	/**
+	 * Gets the current type . This might be different from the static type if the value is dynamic
+	 * @returns
+	 */
+	get type(): GraphSchema {
+		return this._dynamicType || this._type;
+	}
+}
diff --git a/packages/graph-engine/src/programmatic/controlflow/input.ts b/packages/graph-engine/src/programmatic/controlflow/input.ts
new file mode 100644
index 000000000..7acf7f4f2
--- /dev/null
+++ b/packages/graph-engine/src/programmatic/controlflow/input.ts
@@ -0,0 +1,45 @@
+import { ControlFlowNode } from '../nodes/controlflow.js';
+import { ControlFlowPort } from './base.js';
+import { GraphSchema } from '@/schemas/index.js';
+import { IPort } from '../port.js';
+
+/**
+ * Converts a type definition to a map of ControlFlowInputs
+ * @example
+ * ```ts
+ * type myType = {
+ *   a: number,
+ *   b: string
+ * }
+ * type myInputs = ToControlInput<myType>
+ * ```
+ */
+export type ToControlInput<T> = {
+	[P in keyof T]: ControlFlowInput<T[P]>;
+};
+
+export type ControlFlowTriggerFunction<V> = (
+	val: V,
+	type?: GraphSchema
+) => void;
+
+export interface IControlFlowInput<V> extends IPort<ControlFlowNode> {
+	on: ControlFlowTriggerFunction<V>;
+	type?: GraphSchema;
+}
+
+export class ControlFlowInput<V = any> extends ControlFlowPort {
+	protected _cb: ControlFlowTriggerFunction<V>;
+
+	constructor(props: IControlFlowInput<V>) {
+		super(props);
+		this._cb = props.on;
+	}
+	/**
+	 * Triggers the event listener attached to the input.
+	 * @param val
+	 */
+	async trigger(val: V, type?: GraphSchema) {
+		return this._cb?.(val, type);
+	}
+}
diff --git a/packages/graph-engine/src/programmatic/controlflow/output.ts b/packages/graph-engine/src/programmatic/controlflow/output.ts
new file mode 100644
index 000000000..8d7c1898a
--- /dev/null
+++ b/packages/graph-engine/src/programmatic/controlflow/output.ts
@@ -0,0 +1,38 @@
+import { ControlFlowCapability } from '@/capabilities/controlFlow.js';
+import { ControlFlowInput } from './input.js';
+import { ControlFlowNode } from '../nodes/controlflow.js';
+import { ControlFlowPort, IControlflowPort } from './base.js';
+import { GraphSchema } from '@/schemas/index.js';
+
+/**
+ * Converts a type definition to a map of inputs
+ * @example
+ * ```ts
+ * type myType = {
+ * a: number,
+ * b: string
+ * }
+ * type myInputs = ToInput<myType>
+ * ```
+ */
+export type ToControlOutput<T> = {
+	[P in keyof T]: ControlFlowOutput<T[P]>;
+};
+
+export class ControlFlowOutput<T = any> extends ControlFlowPort {
+	constructor(props: IControlflowPort<ControlFlowNode>) {
+		super(props);
+	}
+	/**
+	 * Triggers the event listener attached to the input.
+	 * @param val
+	 */
+	trigger(val: T, type?: GraphSchema) {
+		(
+			this.node.getGraph().capabilities.controlFlow as ControlFlowCapability
+		).ripple(this, val, type);
+	}
+	connect(target: ControlFlowInput) {
+		return this.node.getGraph().connect(this.node, this, target.node, target);
+	}
+}
diff --git a/packages/graph-engine/src/programmatic/dataflow/base.ts b/packages/graph-engine/src/programmatic/dataflow/base.ts
new file mode 100644
index 000000000..f1d35aaaa
--- /dev/null
+++ b/packages/graph-engine/src/programmatic/dataflow/base.ts
@@ -0,0 +1,56 @@
+import { AnySchema, GraphSchema } from '../../schemas/index.js';
+import { IPort, Port } from '../port.js';
+import { computed, makeObservable, observable } from 'mobx';
+import type { Node } from '../index.js';
+
+export const DATAFLOW_PORT = 2;
+
+export interface IDataflowPort<V = any, T extends Node = Node>
+	extends IPort<T> {
+	value: V;
+	type: GraphSchema;
+}
+export class DataFlowPort<V = any, T extends Node = Node> extends Port<T> {
+	//Note that we need null values for the observable to work
+	protected _dynamicType?: GraphSchema = null;
+	protected _type: GraphSchema = AnySchema;
+	protected _value: V;
+	pType = DATAFLOW_PORT;
+
+	constructor(props: IDataflowPort<V, T>) {
+		super(props);
+		this._value = props.value;
+		this._type = props.type;
+
+		makeObservable(this, {
+			//@ts-expect-error
+			_value: observable.ref,
+			_type: observable.ref,
+			_dynamicType: observable.ref,
+			value: computed,
+			type: computed,
+			dynamicType: computed
+		});
+	}
+
+	set(value: V, type?: GraphSchema) {
+		this._value = value;
+		this._dynamicType = type;
+	}
+
+	get dynamicType() {
+		return this._dynamicType;
+	}
+
+	/**
+	 * Gets the current type . This might be different from the static type if the value is dynamic
+	 * @returns
+	 */
+	get type(): GraphSchema {
+		return this._dynamicType || this._type;
+	}
+
+	get value() {
+		return this._value;
+	}
+}
diff --git a/packages/graph-engine/src/programmatic/dataflow/input.ts b/packages/graph-engine/src/programmatic/dataflow/input.ts
new file mode 100644
index 000000000..9f907a1c5
--- /dev/null
+++ b/packages/graph-engine/src/programmatic/dataflow/input.ts
@@ -0,0 +1,181 @@
+import { DataFlowCapability } from '@/capabilities/dataflow.js';
+import { DataFlowPort } from './base.js';
+import { GraphSchema } from '../../schemas/index.js';
+import { Node } from '../nodes/node.js';
+import { Output } from './output.js';
+import { SerializedInput } from '../../graph/types.js';
+import { TypeDefinition } from '../nodes/node.js';
+import { action, makeObservable } from 'mobx';
+import getDefaults from 'json-schema-defaults-esm';
+
+export interface IInputProps<V = any, T extends Node = Node> {
+	name: string;
+	type: GraphSchema;
+	value: V;
+	visible?: boolean;
+	node: T;
+	variadic?: boolean;
+	annotations?: Record<string, any>;
+}
+
+export interface ISetValue {
+	noPropagate?: boolean;
+	type?: GraphSchema;
+}
+
+export class Input<V = any, T extends Node = Node> extends DataFlowPort<V, T> {
+	constructor(props: IInputProps<V, T>) {
+		super(props);
+
+		this.variadic = props.variadic || false;
+		makeObservable(this, {
+			setValue: action,
+			reset: action,
+			deserialize: action
+		});
+	}
+
+	/**
+	 * Sets the value without a side effect. This should only be used internally
+	 * @param value
+	 */
+	setValue(value: V, opts?: ISetValue) {
+		this._value = value;
+		// debugger;
+		if (opts?.type !== undefined) {
+			if (this._type?.$id !== undefined) {
+				if (this._type?.$id !== opts.type.$id) {
+					this._dynamicType = opts.type;
+				}
+			}
+			//Otherwise do a structural comparison
+			else if (JSON.stringify(this._type) !== JSON.stringify(opts.type)) {
+				const { variadic, _dynamicType } = this;
+
+				// for variadic ports, we need to set the dynamic type depending on all the other connected types
+				if (
+					variadic &&
+					_dynamicType &&
+					JSON.stringify(_dynamicType) !== JSON.stringify(opts.type)
+				) {
+					const graph = this.node.getGraph();
+					const sourceNodesOutputTypes = this._edges.map(edge => {
+						const outputs = graph.getNode(edge.source).outputs;
+						return (outputs[edge.sourceHandle] as Output).type;
+					});
+
+					const firstNodeTypeStringValue = JSON.stringify(
+						sourceNodesOutputTypes[0]
+					);
+					if (
+						sourceNodesOutputTypes.every(
+							type => JSON.stringify(type) === firstNodeTypeStringValue
+						)
+					) {
+						this._dynamicType = {
+							type: 'array',
+							items: sourceNodesOutputTypes[0]
+						};
+					} else {
+						this._dynamicType = undefined;
+					}
+				} else {
+					this._dynamicType = opts.type;
+				}
+			}
+		}
+		if (!opts?.noPropagate) {
+			(
+				this.node.getGraph()?.capabilities.dataFlow as DataFlowCapability
+			).update(this.node.id);
+		}
+	}
+
+	/**
+	 * Resets the value of the input to the default value
+	 */
+	reset() {
+		this._dynamicType = undefined;
+		return (this._value = getDefaults(this._type) as V);
+	}
+
+	/**
+	 * Returns the underlying class of the input.
+	 * @returns
+	 */
+	get factory(): typeof Input {
+		//@ts-ignore
+		return this.constructor;
+	}
+
+	clone(): Input<V, T> {
+		const clonedInput = new this.factory({
+			name: this.name,
+			type: this.type,
+			visible: this.visible,
+			node: this.node,
+			variadic: this.variadic,
+			annotations: { ...this.annotations },
+			value: this.value
+		});
+
+		return clonedInput;
+	}
+
+	fullType(): TypeDefinition {
+		return {
+			type: this._type,
+			visible: this.visible,
+			variadic: this.variadic
+		};
+	}
+
+	serialize(): SerializedInput {
+		const type = this.fullType();
+		const serialized = {
+			name: this.name,
+			value: this.value,
+			type: type.type
+		} as SerializedInput;
+
+		if (this._dynamicType) {
+			serialized.dynamicType = this._dynamicType;
+		}
+
+		//Try compact the serialization by omitting the value if its the default
+		if (type.variadic) {
+			serialized.variadic = true;
+		}
+		if (type.visible == false) {
+			serialized.visible = false;
+		}
+
+		if (Object.keys(this.annotations).length > 0) {
+			serialized.annotations = this.annotations;
+		}
+
+		return serialized;
+	}
+
+	deserialize(serialized: SerializedInput) {
+		this.visible = serialized.visible ?? true;
+		this._dynamicType = serialized.dynamicType || undefined;
+		this.annotations = serialized.annotations || {};
+		this._value = serialized.value;
+	}
+}
+
+/**
+ * Converts a type definition to a map of inputs
+ * @example
+ * ```ts
+ * type myType = {
+ * a: number,
+ * b: string
+ * }
+ * type myInputs = ToInput<myType>
+ * ```
+ */
+export type ToInput<T> = {
+	[P in keyof T]: Input<T[P]>;
+};
diff --git a/packages/graph-engine/src/programmatic/dataflow/output.ts b/packages/graph-engine/src/programmatic/dataflow/output.ts
new file mode 100644
index 000000000..47eaaec81
--- /dev/null
+++ b/packages/graph-engine/src/programmatic/dataflow/output.ts
@@ -0,0 +1,89 @@
+import { DataFlowPort } from './base.js';
+import { GraphSchema } from '../../schemas/index.js';
+import { Input } from './input.js';
+import { Node } from '../nodes/node.js';
+import { action, makeObservable } from 'mobx';
+
+export interface IOutputProps<V = any, T extends Node = Node> {
+	name: string;
+	type: GraphSchema;
+	value: V;
+	visible?: boolean;
+	node: T;
+}
+
+export interface ConnectionStatus {
+	/**
+	 * Whether the connection is valid
+	 */
+	valid: boolean;
+}
+
+export class Output<V = any, T extends Node = Node> extends DataFlowPort<V, T> {
+	constructor(props: IOutputProps<V, T>) {
+		super(props);
+		makeObservable(this, {
+			set: action
+		});
+	}
+
+	set(value: V, type?: GraphSchema) {
+		this._value = value;
+		this._dynamicType = type;
+	}
+
+	connect(target: Input<V>) {
+		return this.node.getGraph().connect(this.node, this, target.node, target);
+	}
+
+	/**
+	 * Returns the underlying class of the input.
+	 * @returns
+	 */
+	get factory(): typeof Output {
+		//@ts-ignore
+		return this.constructor;
+	}
+
+	dispose() {
+		const graph = this.node.getGraph();
+		if (graph) {
+			graph.outEdges(this.node.id, this.name).forEach(edge => {
+				if (edge.id) {
+					return;
+				}
+				graph?.removeEdge(edge.id);
+			});
+		}
+	}
+
+	clone(): Output<V, T> {
+		const clonedOutput = new this.factory({
+			name: this.name,
+			type: this.type,
+			value: this._value,
+			visible: this.visible,
+			node: this.node
+		});
+
+		clonedOutput._dynamicType = this._dynamicType;
+		clonedOutput._edges = [...this._edges];
+
+		return clonedOutput;
+	}
+}
+
+/**
+ * Converts a type definition to a map of inputs
+ * @example
+ * ```ts
+ * type myType = {
+ * a: number,
+ * b: string
+ * }
+ * type myInputs = ToInput<myType>
+ * ```
+ */
+export type ToOutput<T> = {
+	[P in keyof T]: Output<T[P]>;
+};
diff --git a/packages/graph-engine/src/programmatic/edge.ts b/packages/graph-engine/src/programmatic/edge.ts
index 815a106d2..a49bfe751 100644
--- a/packages/graph-engine/src/programmatic/edge.ts
+++ b/packages/graph-engine/src/programmatic/edge.ts
@@ -1,6 +1,6 @@
+import { Annotated } from './annotated.js';
 import { SerializedEdge } from '../index.js';
-import { makeObservable, observable } from 'mobx';
-import { v4 as uuid } from 'uuid';
+import { nanoid as uuid } from 'nanoid';
 
 /**
  * Additional data stored on an edge
@@ -20,8 +20,18 @@ export interface IEdge {
 	annotations?: Record<string, any>;
 }
 
-export class Edge {
-	public annotations: Record<string, any> = {};
+export const cloneEdge = (edge: Edge): Edge => {
+	return new Edge({
+		id: edge.id,
+		source: edge.source,
+		sourceHandle: edge.sourceHandle,
+		target: edge.target,
+		targetHandle: edge.targetHandle,
+		annotations: { ...edge.annotations }
+	});
+};
+
+export class Edge extends Annotated {
 	id: string;
 	source: string;
 	sourceHandle: string;
@@ -29,16 +39,12 @@ export class Edge {
 	targetHandle: string;
 
 	constructor(props: IEdge) {
+		super(props);
 		this.id = props.id || uuid();
 		this.source = props.source;
 		this.sourceHandle = props.sourceHandle;
 		this.target = props.target;
 		this.targetHandle = props.targetHandle;
-		this.annotations = props.annotations || {};
-
-		makeObservable(this, {
-			annotations: observable.shallow
-		});
 	}
 
 	serialize(): SerializedEdge {
diff --git a/packages/graph-engine/src/programmatic/nodes/controlflow.ts b/packages/graph-engine/src/programmatic/nodes/controlflow.ts
new file mode 100644
index 000000000..bf87031b0
--- /dev/null
+++ b/packages/graph-engine/src/programmatic/nodes/controlflow.ts
@@ -0,0 +1,89 @@
+import {
+	ControlFlowInput,
+	ControlFlowTriggerFunction
+} from '../controlflow/input.js';
+import { ControlFlowOutput } from '../controlflow/output.js';
+import { INodeDefinition, Node, TypeDefinition } from './node.js';
+
+export interface IControlFlowNode<
+	T extends Node & IControlFlowNode<T> = ControlFlowNode
+> {
+	controlflow: ControlFlow<T>;
+}
+
+export class ControlFlow<T extends Node & IControlFlowNode<T>> {
+	node: T;
+	constructor(node: T) {
+		this.node = node;
+	}
+
+	dispose() {
+		this.node = null;
+	}
+
+	/**
+	 * Creates a new input and adds it to the node
+	 * @param name
+	 * @param input
+	 */
+	addInput<T = unknown>(
+		name: string,
+		executor: ControlFlowTriggerFunction<T>,
+		type?: TypeDefinition
+	) {
+		return this.node.addInput(
+			name,
+			new ControlFlowInput<T>({
+				name,
+				on: executor,
+				...type,
+				node: this.node
+			})
+		);
+	}
+
+	addOutput<T = unknown>(name: string, type?: TypeDefinition) {
+		return this.node.addOutput(
+			name,
+			new ControlFlowOutput<T>({
+				...type,
+				name,
+				node: this.node
+			})
+		);
+	}
+
+	/**
+	 * Function to call when the graph has been started.
+	 * This is only really necessary for nodes that need to do something when the graph is expected to be running continuously
+	 */
+	public onStart = () => {};
+	public onStop = () => {};
+	/**
+	 * By default, the node will stop when the graph is paused
+	 */
+	public onPause = () => {
+		this.onStop();
+	};
+	/**
+	 * By default, the node will start when the graph is resumed
+	 */
+	public onResume = () => {
+		this.onStart();
+	};
+}
+
+/**
+ * The dataflow node can be used to easily create dataflow based nodes by extending off of it and implementing the execute method
+ */
+export class ControlFlowNode
+	extends Node
+	implements IControlFlowNode<ControlFlowNode>
+{
+	controlflow: ControlFlow<ControlFlowNode> = new ControlFlow<ControlFlowNode>(
+		this
+	);
+	constructor(props: INodeDefinition) {
+		super(props);
+	}
+}
diff --git a/packages/graph-engine/src/programmatic/nodes/dataflow.ts b/packages/graph-engine/src/programmatic/nodes/dataflow.ts
new file mode 100644
index 000000000..ce18341e6
--- /dev/null
+++ b/packages/graph-engine/src/programmatic/nodes/dataflow.ts
@@ -0,0 +1,121 @@
+import { INodeDefinition, Node, TypeDefinition } from './node.js';
+import { Input, Output } from '../index.js';
+import { NodeRun } from '@/types.js';
+import { action, computed, makeObservable, observable } from 'mobx';
+import { annotatedNodeRunning } from '@/annotations/index.js';
+import getDefaults from 'json-schema-defaults-esm';
+
+export interface IDataflowNode<
+	T extends Node & IDataflowNode<T> = DataflowNode
+> {
+	dataflow: Dataflow<T>;
+	execute(): Promise<void> | void;
+}
+
+export class Dataflow<T extends Node & IDataflowNode<T>> {
+	node: T;
+	public lastExecutedDuration = 0;
+	public error?: Error = null;
+
+	constructor(node: T) {
+		this.node = node;
+
+		makeObservable(this, {
+			error: observable.ref,
+			isRunning: computed,
+			run: action,
+			execute: action
+		});
+	}
+
+	dispose() {
+		this.node = null;
+	}
+
+	/**
+	 * Creates a new input and adds it to the node
+	 * @param name
+	 * @param input
+	 */
+	addInput<T = unknown>(name: string, type: TypeDefinition) {
+		return this.node.addInput(
+			name,
+			new Input<T>({
+				name,
+				...type,
+				value: getDefaults(type.type) as T,
+				node: this.node
+			})
+		);
+	}
+
+	addOutput<T = unknown>(name: string, type: TypeDefinition) {
+		this.node.addOutput(
+			name,
+			new Output<T>({
+				name,
+				...type,
+				type: type.type,
+				value: getDefaults(type.type) as T,
+				node: this.node
+			})
+		);
+	}
+
+	/**
+	 * This is the place to add applicate specific logic to execute the node.
+	 * This can be used directly, but you should preferably never call this and instead execute from the graph which will control the lifecycle of the node
+	 * @override
+	 */
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	execute(): Promise<void> | void {
+		return this.node.execute();
+	}
+	/**
+	 * Runs the node. Internally this calls the execute method, but the run entrypoint allows for additional tracking and lifecycle management
+	 */
+	async run(): Promise<NodeRun> {
+		this.node.setAnnotation(annotatedNodeRunning, true);
+		const start = performance.now();
+		this.node.getGraph()?.emit('nodeStarted', {
+			node: this.node,
+			start
+		});
+		try {
+			await this.execute();
+			this.error = undefined;
+		} catch (err) {
+			console.log(err);
+			this.error = err as Error;
+		}
+		const end = performance.now();
+		delete this.node.annotations[annotatedNodeRunning];
+		this.lastExecutedDuration = end - start;
+
+		const result = {
+			node: this.node,
+			error: this.error,
+			start,
+			end
+		};
+
+		this.node.getGraph()?.emit('nodeExecuted', result);
+
+		return result;
+	}
+
+	get isRunning() {
+		return !!this.node.annotations[annotatedNodeRunning];
+	}
+}
+
+/**
+ * The dataflow node can be used to easily create dataflow based nodes by extending off of it and implementing the execute method
+ */
+export class DataflowNode extends Node implements IDataflowNode<DataflowNode> {
+	dataflow: Dataflow<DataflowNode> = new Dataflow<DataflowNode>(this);
+	constructor(props: INodeDefinition) {
+		super(props);
+	}
+	execute() {}
+}
diff --git a/packages/graph-engine/src/programmatic/nodes/node.ts b/packages/graph-engine/src/programmatic/nodes/node.ts
new file mode 100644
index 000000000..5c6005f51
--- /dev/null
+++ b/packages/graph-engine/src/programmatic/nodes/node.ts
@@ -0,0 +1,273 @@
+import { Annotated } from '../annotated.js';
+import { DATAFLOW_PORT } from '../dataflow/base.js';
+import { Graph } from '../../graph/index.js';
+import { GraphSchema } from '../../schemas/index.js';
+import { IDeserializeOpts, SerializedNode } from '../../graph/types.js';
+import { Input } from '../dataflow/input.js';
+import { Output } from '../dataflow/output.js';
+import { Port } from '../port.js';
+import { action, makeObservable, observable } from 'mobx';
+import { nanoid as uuid } from 'nanoid';
+
+export interface INodeDefinition {
+	graph: Graph;
+	id?: string;
+	inputs?: Record<string, Input>;
+	outputs?: Record<string, Output>;
+	annotations?: Record<string, unknown>;
+}
+
+// Helper type to preserve literal types
+type Prettify<T> = {
+	[K in keyof T]: T[K];
+	// eslint-disable-next-line @typescript-eslint/ban-types
+} & {};
+
+type InputValue<T> = T extends Input<infer U> ? U : never;
+// Updated UnwrapInput type
+type UnwrapInput<T> = Prettify<{
+	[K in keyof T]: InputValue<T[K]>;
+}>;
+
+export interface TypeDefinition {
+	type: GraphSchema;
+	/**
+	 * When exposing an array of inputs or outputs, allow specific control for connecting each item
+	 */
+	variadic?: boolean;
+	/**
+	 * Whether the input is visible by default in the UI
+	 */
+	visible?: boolean;
+	/**
+	 * Additional annotations to store on the input
+	 */
+	annotations?: Record<string, unknown>;
+}
+
+export class Node extends Annotated {
+	/**
+	 * Unique instance specific identifier
+	 */
+	readonly id: string;
+	public static readonly description?: string;
+	public static readonly title?: string;
+	static readonly type: string = 'unknown';
+
+	/**
+	 * This holds the definitions of the inputs and outputs
+	 */
+	public inputs: Record<string, Port> = {};
+	public outputs: Record<string, Port> = {};
+
+	private _graph: Graph;
+
+	constructor(props: INodeDefinition) {
+		super(props);
+		this.id = props.id || uuid();
+		this._graph = props.graph;
+		if (this._graph) {
+			this._graph.addNode(this);
+		}
+
+		makeObservable(this, {
+			inputs: observable.shallow,
+			outputs: observable.shallow,
+			addInput: action,
+			addOutput: action,
+			removeInput: action,
+			removeOutput: action
+		});
+		//Defined nodes would be specified here
+	}
+
+	/**
+	 * Creates a new input and adds it to the node
+	 * @param name
+	 * @param input
+	 */
+	addInput(name: string, port: Port) {
+		this.inputs[name] = port;
+	}
+	addOutput(name: string, port: Port) {
+		this.outputs[name] = port;
+	}
+	/**
+	 * Removes a named input from the node. This should only be used for dynamic inputs
+	 * @param name
+	 */
+	removeInput(name: string) {
+		if (this._graph) {
+			this._graph.inEdges(this.id, name).forEach(edge => {
+				if (edge.id) {
+					return;
+				}
+				this._graph?.removeEdge(edge.id);
+			});
+		}
+		delete this.inputs[name];
+	}
+
+	removeOutput(name: string) {
+		if (this._graph) {
+			this._graph.outEdges(this.id, name).forEach(edge => {
+				if (edge.id) {
+					return;
+				}
+				this._graph?.removeEdge(edge.id);
+			});
+		}
+		delete this.outputs[name];
+	}
+
+	public setGraph(graph: Graph) {
+		this._graph = graph;
+	}
+
+	public getGraph() {
+		return this._graph;
+	}
+
+	public clone(newGraph: Graph): Node {
+		// Create a new instance using the constructor
+		const clonedNode = new this.factory({
+			graph: newGraph,
+			id: uuid()
+		});
+
+		// Copy input values
+		Object.entries(this.inputs).forEach(([key, input]: [string, Input]) => {
+			//TODO remove this. The dataflow cloning needs to be handled by the dataflow itself
+			if (input.variadic) return;
+			const targetInput = clonedNode.inputs[key] as Input;
+			if (targetInput && targetInput.pType === DATAFLOW_PORT) {
+				targetInput.setValue(input.value);
+				//Try handle dynamic inputs
+			} else {
+				clonedNode.inputs[key] = input.clone();
+			}
+		});
+
+		Object.entries(this.outputs).forEach(([key, output]) => {
+			clonedNode.outputs[key] = output.clone();
+		});
+
+		clonedNode.annotations = { ...this.annotations };
+
+		// Clone inner graph if it exists
+		// @ts-expect-error
+		if (this._innerGraph) {
+			// @ts-expect-error
+			clonedNode._innerGraph = this._innerGraph.clone();
+		}
+
+		return clonedNode;
+	}
+	/**
+	 * Get the type of the nodes
+	 * @returns
+	 */
+	public nodeType = () => {
+		//@ts-ignore
+		return this.constructor.type;
+	};
+	/**
+	 * Returns the underlying class of the node. Useful for getting class specific properties
+	 * @returns
+	 */
+	get factory(): typeof Node {
+		//@ts-ignore
+		return this.constructor;
+	}
+
+	/**
+	 * Serializes the node value for storage
+	 * @returns
+	 */
+	public serialize(): SerializedNode {
+		const serialized = {
+			id: this.id,
+			type: this.nodeType(),
+			//Filter out any inputs that are connected as they will be serialized as part of the edge
+			inputs: Object.values(this.inputs)
+				.map(x => (x as Input).serialize?.())
+				.filter(x => !!x)
+		} as SerializedNode;
+		if (Object.keys(this.annotations).length > 0) {
+			serialized.annotations = this.annotations;
+		}
+		return serialized;
+	}
+
+	/**
+	 * How to deserialize the node
+	 * @param serialized
+	 * @returns
+	 */
+	public static async deserialize(opts: IDeserializeOpts): Promise<Node> {
+		const newNode = new this({
+			id: opts.serialized.id,
+			...opts
+		});
+
+		newNode.annotations = opts.serialized.annotations || {};
+
+		//Set the values directly from the save values
+		opts.serialized.inputs.forEach(input => {
+			//Attempt a lookup by  name
+			const foundInput = newNode.inputs[input.name];
+
+			if (!foundInput) {
+				//We need to create the input, it might be dynamic so we need to create it
+				newNode.inputs[input.name] = new Input({
+					name: input.name,
+					type: input.type,
+					variadic: input.variadic,
+					visible: input.visible,
+					value: input.value,
+					node: newNode,
+					annotations: input.annotations
+				});
+			} else {
+				//Set the value from the saved value
+				(foundInput as Input).deserialize?.(input);
+			}
+		});
+
+		return newNode;
+	}
+
+	public static getType = () => {
+		return this.type;
+	};
+
+	getAllInputs = (): UnwrapInput<this['inputs']> => {
+		return Object.fromEntries(
+			Object.entries(this.inputs as Record<string, Input>).map(
+				([key, value]) => [key, value.value]
+			)
+		) as UnwrapInput<this['inputs']>;
+	};
+
+	/**
+	 * Handles cleanup for nodes with state.
+	 * Use the super method to clear the graph reference
+	 *
+	 * @example
+	 * ```typescript
+	 * class MyNode extends Node {
+	 *  dispose() {
+	 *
+	 *   Node.prototype.dispose.call(this);
+	 *   // or if you have full ES6 support
+	 *   super.dispose();
+	 *
+	 *  //Some additional manual cleanup
+	 *  // ...
+	 * }
+	 */
+	dispose = () => {
+		//@ts-ignore This is forcing manual cleanup
+		this._graph = undefined;
+	};
+}
diff --git a/packages/graph-engine/src/programmatic/port.ts b/packages/graph-engine/src/programmatic/port.ts
index 613f62050..9df1ca3f4 100644
--- a/packages/graph-engine/src/programmatic/port.ts
+++ b/packages/graph-engine/src/programmatic/port.ts
@@ -1,57 +1,47 @@
-import { AnySchema, GraphSchema } from '../schemas/index.js';
+import { Annotated } from './annotated.js';
 import { Edge } from './edge.js';
-import { Node } from './node.js';
+import { Node } from './nodes/node.js';
 import { action, computed, makeObservable, observable } from 'mobx';
 
-export interface IPort<T = any> {
+export interface IPort<T extends Node> {
 	name: string;
 	visible?: boolean;
-	node: Node;
-	type: GraphSchema;
-	value: T;
+	node: T;
 	annotations?: Record<string, any>;
 }
 
-export class Port<T = any> {
+export class Port<T extends Node = Node> extends Annotated {
 	/**
 	 * Name to show in the side panel.Optional
 	 * */
 	public readonly name: string;
 	public visible: boolean = false;
-	public node: Node;
-	//Note that we need null values for the observable to work
-	protected _dynamicType: GraphSchema | null = null;
-	protected _type: GraphSchema = AnySchema;
-	protected _value: T;
-	// Used to store arbitrary meta data. Most commonly used in the UI
-	public annotations = {} as Record<string, any>;
+	/**
+	 * If the port is variadic, meaning it can accept multiple incoming edges. Useless for outputs
+	 */
+	public variadic?: boolean;
+	public node: T;
+	/**
+	 * Never change this. This is used to dynamicly determine the type of the port
+	 */
+	pType = 0;
+
 	/**
 	 * Unless the port is variadic this will always be a single edge on an input port, however on an output port it can be multiple edges
 	 */
 	_edges: Edge[] = [];
 
 	constructor(props: IPort<T>) {
+		super(props);
 		this.name = props.name;
-		this.visible = props.visible == false ? false : true;
+		this.visible = props.visible ?? true;
 		this.node = props.node;
-		this._type = props.type;
-		this._value = props.value;
-		this.annotations = props.annotations || {};
 
 		makeObservable(this, {
-			//@ts-ignore
-			_type: observable.ref,
-			_dynamicType: observable.ref,
-			_value: observable.ref,
-			_edges: observable.shallow,
+			_edges: observable.ref,
 			visible: observable.ref,
-			annotations: observable.shallow,
-			type: computed,
-			value: computed,
 			isConnected: computed,
-			dynamicType: computed,
-			setVisible: action,
-			setType: action
+			setVisible: action
 		});
 	}
 
@@ -59,30 +49,15 @@ export class Port<T = any> {
 		return this._edges.length > 0;
 	}
 
-	get dynamicType() {
-		return this._dynamicType;
-	}
-	get value(): T {
-		return this._value;
+	setVisible(visible: boolean) {
+		this.visible = visible;
 	}
-
 	/**
-	 * Gets the current type . This might be different from the static type if the value is dynamic
+	 * This is expected to be overriden with the correct implementation to handle cloning your port
 	 * @returns
 	 */
-	get type(): GraphSchema {
-		return this._dynamicType || this._type;
-	}
-
-	setVisible(visible: boolean) {
-		this.visible = visible;
-	}
-
-	setNode(node: Node) {
-		this.node = node;
-	}
-
-	setType(type: GraphSchema) {
-		this._dynamicType = type;
+	clone(): Port<T> {
+		//@ts-ignore
+		return new this.constructor();
 	}
 }
diff --git a/packages/graph-engine/src/schemas/index.ts b/packages/graph-engine/src/schemas/index.ts
index 59c458251..4d417bf7d 100644
--- a/packages/graph-engine/src/schemas/index.ts
+++ b/packages/graph-engine/src/schemas/index.ts
@@ -46,28 +46,6 @@ export const ColorSchema: SchemaObject = {
 	required: ['channels', 'space']
 };
 
-export const COLOR_OBJECT = 'https://schemas.tokens.studio/colorObject.json';
-export const ColorObjectSchema: SchemaObject = {
-	$id: COLOR,
-	title: 'Color Object',
-	type: 'string'
-};
-
-export const DIMENSION = 'https://schemas.tokens.studio/dimension.json';
-export const DimensionSchema: SchemaObject = {
-	$id: DIMENSION,
-	title: 'Dimension',
-	type: 'object',
-	properties: {
-		value: {
-			type: NumberSchema
-		},
-		unit: {
-			type: StringSchema
-		}
-	}
-};
-
 export const ANY = 'https://schemas.tokens.studio/any.json';
 export const AnySchema: SchemaObject = {
 	$id: ANY,
@@ -248,17 +226,6 @@ export const Vec2Schema: SchemaObject = {
 	default: [0, 0]
 };
 
-export const VEC3 = 'https://schemas.tokens.studio/vec3.json';
-export const Vec3Schema: SchemaObject = {
-	$id: VEC3,
-	title: 'Vec3',
-	type: 'array',
-	minItems: 3,
-	maxItems: 3,
-	items: NumberSchema,
-	default: [0, 0, 0]
-};
-
 export const GRADIENT_STOP = 'https://schemas.tokens.studio/gradientStop.json';
 export const GradientStopSchema: SchemaObject = {
 	$id: GRADIENT_STOP,
@@ -319,17 +286,6 @@ export const GradientSchema: SchemaObject = {
 		}
 	}
 };
-
-export const BUFFER = 'https://schemas.tokens.studio/buffer.json';
-export const BufferSchema: SchemaObject = {
-	$id: BUFFER,
-	title: 'Buffer',
-	type: 'object',
-	default: null,
-	//Listing all the properties of a buffer is not practical
-	properties: {}
-};
-
 /**
  * Checks whether a schema can be converted to another schema
  * @param src
@@ -351,24 +307,6 @@ export const canConvertSchemaTypes = (
 		if (target.items?.$id === ANY) return true;
 	}
 
-	switch (src.$id) {
-		case NUMBER:
-			switch (target.$id) {
-				case STRING:
-					return true;
-				case BOOLEAN:
-					return true;
-			}
-			break;
-		case STRING: {
-			switch (target.$id) {
-				case NUMBER:
-					return true;
-				case BOOLEAN:
-					return true;
-			}
-		}
-	}
 	return false;
 };
 
@@ -385,22 +323,6 @@ export const convertSchemaType = (
 	targetSchema: SchemaObject,
 	src: any
 ) => {
-	switch (srcSchema.$id) {
-		case NUMBER:
-			switch (targetSchema.$id) {
-				case STRING:
-					return String(src);
-				case BOOLEAN:
-					return Boolean(src);
-			}
-			break;
-		case STRING:
-			switch (targetSchema.$id) {
-				case BOOLEAN:
-					return Boolean(src);
-			}
-			break;
-	}
 	return src;
 };
 
@@ -416,6 +338,5 @@ export const AllSchemas = [
 	ObjectSchema,
 	CurveSchema,
 	Vec2Schema,
-	Vec3Schema,
 	GradientStopSchema
 ];
diff --git a/packages/graph-engine/src/utils/dedupe.ts b/packages/graph-engine/src/utils/dedupe.ts
new file mode 100644
index 000000000..bd371ac88
--- /dev/null
+++ b/packages/graph-engine/src/utils/dedupe.ts
@@ -0,0 +1 @@
+export const dedupe = (arr: string[]) => [...new Set(arr)];
diff --git a/packages/graph-engine/src/utils/graph.ts b/packages/graph-engine/src/utils/graph.ts
new file mode 100644
index 000000000..91cf9a2c5
--- /dev/null
+++ b/packages/graph-engine/src/utils/graph.ts
@@ -0,0 +1,52 @@
+import { Graph } from '@/graph/graph.js';
+import { Node, Port } from '@/programmatic/index.js';
+import { SerializedGraph } from '@/graph/types.js';
+import { dedupe } from './dedupe.js';
+
+/**
+ * Extracts the nodes types from a serialized graph
+ * @param graph
+ */
+export const extractTypes = (graph: SerializedGraph): string[] => {
+	return Object.values(graph.nodes.map(x => x.type));
+};
+
+export const hasConnectedInput = (
+	graph: Graph,
+	source: Node,
+	input: Port
+): boolean => {
+	const edges = graph.inEdges(source.id);
+
+	return edges.some(x => x.targetHandle === input.name);
+};
+
+/**
+ * Returns the Nodes of the node that are immediate predecessors of the given node O(m) the amount of edges
+ * @param nodeId
+ * @returns
+ */
+export const predecessors = (graph: Graph, nodeId: string): Node[] => {
+	//Lookup the node
+	const node = graph.nodes[nodeId];
+	if (!node) {
+		return [];
+	}
+	//Lookup the incoming edges
+
+	//This returns all edge ids that target this node
+	const out = Object.values(graph.edges).reduce((acc, x) => {
+		if (x.target === nodeId) {
+			acc.push(x.source);
+		}
+		return acc;
+	}, [] as string[]);
+
+	return dedupe(out).map(x => graph.nodes[x]);
+};
+
+export const injectCapabilities = (old: Graph, newGraph: Graph) => {
+	old.registeredCapabilities.forEach(capability =>
+		newGraph.registerCapability(capability)
+	);
+};
diff --git a/packages/graph-engine/tests/suites/basic.test.ts b/packages/graph-engine/tests/suites/basic.test.ts
index 60d48fdac..bd2846658 100644
--- a/packages/graph-engine/tests/suites/basic.test.ts
+++ b/packages/graph-engine/tests/suites/basic.test.ts
@@ -1,10 +1,12 @@
-import { Graph, SerializedGraph, nodeLookup } from '../../src/index.js';
+import { NodeFactory, SerializedGraph, nodeLookup } from '../../src/index.js';
 import { describe, expect, test } from 'vitest';
 import basic from '../data/processed/basic.js';
 
 describe('basic', () => {
 	test('performs basic passthrough calculations', async () => {
-		const graph = await new Graph().deserialize(
+		const dataflow = getDataFlowGraph();
+
+		const graph = await dataflow.deserialize(
 			basic as unknown as SerializedGraph,
 			key => nodeLookup[key]
 		);
diff --git a/packages/graph-engine/tests/suites/enqueing.test.ts b/packages/graph-engine/tests/suites/enqueing.test.ts
index a29aa235f..859c7e091 100644
--- a/packages/graph-engine/tests/suites/enqueing.test.ts
+++ b/packages/graph-engine/tests/suites/enqueing.test.ts
@@ -1,4 +1,4 @@
-import { Graph } from '../../src/index.js';
+import { Input } from '@/index.js';
 import { NumberSchema } from '../../src/schemas/index.js';
 import { describe, expect, test } from 'vitest';
 import ConstantNode from '../../src/nodes/generic/constant.js';
@@ -15,7 +15,7 @@ describe('enqueing', () => {
 		const output = new OutputNode({ id: 'output', graph });
 
 		//Create an input port on the output node
-		output.addInput('input', {
+		output.dataflow.addInput('input', {
 			type: NumberSchema
 		});
 
@@ -31,7 +31,7 @@ describe('enqueing', () => {
 		//These should be enqueued automatically
 		input1.outputs.value.connect(sub.inputs.inputs);
 		input2.outputs.value.connect(sub.inputs.inputs);
-		sub.outputs.value.connect(output.inputs.input);
+		sub.outputs.value.connect(output.inputs.input as Input);
 
 		const final = await graph.execute();
 
diff --git a/packages/graph-engine/tests/suites/nodeUsage.test.ts b/packages/graph-engine/tests/suites/nodeUsage.test.ts
index ed7feb30d..9c2e3bf7d 100644
--- a/packages/graph-engine/tests/suites/nodeUsage.test.ts
+++ b/packages/graph-engine/tests/suites/nodeUsage.test.ts
@@ -1,4 +1,4 @@
-import { Edge, Graph, nodeLookup } from '../../src/index.js';
+import { Edge, Input, Output, nodeLookup } from '../../src/index.js';
 import { StringSchema } from '../../src/schemas/index.js';
 import { describe, expect, test } from 'vitest';
 import InputNode from '../../src/nodes/generic/input.js';
@@ -22,20 +22,22 @@ describe('nodeUsage', () => {
 		graph.addNode(output);
 
 		//Create an input port on the input
-		input.addInput('foo', {
+		input.dataflow.addInput('foo', {
 			type: StringSchema
 		});
 
-		output.addInput('input', {
+		output.dataflow.addInput('input', {
 			type: StringSchema
 		});
 
 		//Input is a special case with dynamic values so it needs to be executed and computed to generate the output values
-		const res = await input.run();
+		const res = await input.dataflow.run();
 
 		expect(res.error).to.be.null;
 
-		const edge = input.outputs.foo.connect(output.inputs.input);
+		const edge = (input.outputs.foo as Output).connect(
+			output.inputs.input as Input
+		);
 
 		const final = await graph.execute({
 			inputs: {
diff --git a/packages/graph-engine/tests/suites/nodes/array/concat.test.ts b/packages/graph-engine/tests/suites/nodes/array/concat.test.ts
index 3af9902a3..bbeede60c 100644
--- a/packages/graph-engine/tests/suites/nodes/array/concat.test.ts
+++ b/packages/graph-engine/tests/suites/nodes/array/concat.test.ts
@@ -1,4 +1,3 @@
-import { Graph } from '../../../../src/graph/graph.js';
 import { describe, expect, test } from 'vitest';
 import Node from '../../../../src/nodes/array/concat.js';
 
diff --git a/packages/graph-engine/tests/suites/nodes/array/flatten.test.ts b/packages/graph-engine/tests/suites/nodes/array/flatten.test.ts
index 5f1b109d5..f46fa53e4 100644
--- a/packages/graph-engine/tests/suites/nodes/array/flatten.test.ts
+++ b/packages/graph-engine/tests/suites/nodes/array/flatten.test.ts
@@ -1,6 +1,5 @@
-import { Graph } from '../../../../src/graph/graph.js';
-import { NumberSchema } from '../../../../src/index.js';
-import { arrayOf } from '../../../../src/schemas/utils.js';
+import { NumberSchema } from '@/index.js';
+import { arrayOf } from '@/schemas/utils.js';
 import { describe, expect, test } from 'vitest';
 import Node from '../../../../src/nodes/array/flatten.js';
 
diff --git a/packages/graph-engine/tests/suites/nodes/array/indexArray.test.ts b/packages/graph-engine/tests/suites/nodes/array/indexArray.test.ts
index 013625717..792eaab03 100644
--- a/packages/graph-engine/tests/suites/nodes/array/indexArray.test.ts
+++ b/packages/graph-engine/tests/suites/nodes/array/indexArray.test.ts
@@ -1,10 +1,9 @@
-import { Graph } from '../../../../src/graph/graph.js';
 import { describe, expect, test } from 'vitest';
 import Node from '../../../../src/nodes/array/indexArray.js';
 
 describe('array/indexArray', () => {
 	test('returns the expected value', async () => {
-		const graph = new Graph();
+		const graph = getDataFlowGraph();
 		const node = new Node({ graph });
 
 		node.inputs.array.setValue([0, 1, 2]);
@@ -17,7 +16,7 @@ describe('array/indexArray', () => {
 	});
 
 	test('returns value at negative index', async () => {
-		const graph = new Graph();
+		const graph = getDataFlowGraph();
 		const node = new Node({ graph });
 
 		node.inputs.array.setValue([11, 22, 33, 44, 55]);
diff --git a/packages/graph-engine/tests/suites/nodes/array/push.test.ts b/packages/graph-engine/tests/suites/nodes/array/push.test.ts
index 960f42595..b003992b1 100644
--- a/packages/graph-engine/tests/suites/nodes/array/push.test.ts
+++ b/packages/graph-engine/tests/suites/nodes/array/push.test.ts
@@ -1,10 +1,9 @@
-import { Graph } from '../../../../src/graph/graph.js';
 import { describe, expect, test } from 'vitest';
 import Node from '../../../../src/nodes/array/push.js';
 
 describe('array/push', () => {
 	test('does a non mutative push', async () => {
-		const graph = new Graph();
+		const graph = getDataFlowGraph();
 		const node = new Node({ graph });
 
 		const array = [1, 2, 3];
diff --git a/packages/graph-engine/tests/suites/nodes/array/reverse.test.ts b/packages/graph-engine/tests/suites/nodes/array/reverse.test.ts
index 8d5431cf4..b87998413 100644
--- a/packages/graph-engine/tests/suites/nodes/array/reverse.test.ts
+++ b/packages/graph-engine/tests/suites/nodes/array/reverse.test.ts
@@ -1,10 +1,9 @@
-import { Graph } from '../../../../src/graph/graph.js';
 import { describe, expect, test } from 'vitest';
 import Node from '../../../../src/nodes/array/reverse.js';
 
 describe('array/reverse', () => {
 	test('does a non mutative reverse', async () => {
-		const graph = new Graph();
+		const graph = getDataFlowGraph();
 		const node = new Node({ graph });
 
 		const array = [1, 2, 3];
diff --git a/packages/graph-engine/tests/suites/nodes/array/sort.test.ts b/packages/graph-engine/tests/suites/nodes/array/sort.test.ts
index beb934817..7ef47eaf5 100644
--- a/packages/graph-engine/tests/suites/nodes/array/sort.test.ts
+++ b/packages/graph-engine/tests/suites/nodes/array/sort.test.ts
@@ -1,10 +1,9 @@
-import { Graph } from '../../../../src/graph/graph.js';
 import { describe, expect, test } from 'vitest';
 import Node, { Order } from '../../../../src/nodes/array/sort.js';
 
 describe('array/sort', () => {
 	test('sorts the values as expected', async () => {
-		const graph = new Graph();
+		const graph = getDataFlowGraph();
 		const node = new Node({ graph });
 
 		node.inputs.array.setValue([1, 2, 3, 4]);
@@ -18,7 +17,7 @@ describe('array/sort', () => {
 	});
 
 	test('sorts the values as expected', async () => {
-		const graph = new Graph();
+		const graph = getDataFlowGraph();
 		const node = new Node({ graph });
 
 		node.inputs.array.setValue([{ a: 3 }, { a: 2 }, { a: 4 }]);
diff --git a/packages/graph-engine/tests/suites/nodes/color/contrasting.test.ts b/packages/graph-engine/tests/suites/nodes/color/contrasting.test.ts
index 8cc740ad0..38b3906a7 100644
--- a/packages/graph-engine/tests/suites/nodes/color/contrasting.test.ts
+++ b/packages/graph-engine/tests/suites/nodes/color/contrasting.test.ts
@@ -24,7 +24,7 @@ describe('color/contrasting', () => {
 		node.inputs.algorithm.setValue(ContrastAlgorithm.APCA);
 		node.inputs.threshold.setValue(60);
 
-		await node.run();
+		await node.execute();
 
 		const output = getAllOutputs(node);
 
@@ -57,7 +57,7 @@ describe('color/contrasting', () => {
 		node.inputs.algorithm.setValue(ContrastAlgorithm.WCAG21);
 		node.inputs.threshold.setValue(4.5);
 
-		await node.run();
+		await node.execute();
 
 		const output = getAllOutputs(node);
 
@@ -90,7 +90,7 @@ describe('color/contrasting', () => {
 		node.inputs.algorithm.setValue(ContrastAlgorithm.APCA);
 		node.inputs.threshold.setValue(60);
 
-		await node.run();
+		await node.execute();
 
 		const output = getAllOutputs(node);
 
diff --git a/packages/graph-engine/tests/suites/nodes/color/create.test.ts b/packages/graph-engine/tests/suites/nodes/color/create.test.ts
index cd471ebf9..6a1c9ce7b 100644
--- a/packages/graph-engine/tests/suites/nodes/color/create.test.ts
+++ b/packages/graph-engine/tests/suites/nodes/color/create.test.ts
@@ -1,10 +1,9 @@
-import { Graph } from '../../../../src/graph/graph.js';
 import { describe, expect, test } from 'vitest';
 import Node from '../../../../src/nodes/color/create.js';
 
 describe('color/create', () => {
 	test('creates the expected color with rgba', async () => {
-		const graph = new Graph();
+		const graph = getDataFlowGraph();
 		const node = new Node({ graph });
 
 		node.inputs.space.setValue('srgb');
diff --git a/packages/graph-engine/tests/suites/nodes/css/box.test.ts b/packages/graph-engine/tests/suites/nodes/css/box.test.ts
index 94a151290..aceef7dcc 100644
--- a/packages/graph-engine/tests/suites/nodes/css/box.test.ts
+++ b/packages/graph-engine/tests/suites/nodes/css/box.test.ts
@@ -1,10 +1,9 @@
-import { Graph } from '../../../../src/graph/graph.js';
 import { describe, expect, test } from 'vitest';
 import Node from '../../../../src/nodes/css/box.js';
 
 describe('css/box', () => {
 	test('produces the css box descriptionbs', async () => {
-		const graph = new Graph();
+		const graph = getDataFlowGraph();
 		const node = new Node({ graph });
 
 		node.inputs.top.setValue(5);
diff --git a/packages/graph-engine/tests/suites/nodes/math/abs.test.ts b/packages/graph-engine/tests/suites/nodes/math/abs.test.ts
index 1290cc5c5..2deee0a23 100644
--- a/packages/graph-engine/tests/suites/nodes/math/abs.test.ts
+++ b/packages/graph-engine/tests/suites/nodes/math/abs.test.ts
@@ -1,10 +1,9 @@
-import { Graph } from '../../../../src/graph/graph.js';
 import { describe, expect, test } from 'vitest';
 import Node from '../../../../src/nodes/math/abs.js';
 
 describe('math/abs', () => {
 	test('absolutes the input', async () => {
-		const graph = new Graph();
+		const graph = getDataFlowGraph();
 		const node = new Node({ graph });
 
 		node.inputs.input.setValue(-1);
diff --git a/packages/graph-engine/tests/suites/nodes/math/add.test.ts b/packages/graph-engine/tests/suites/nodes/math/add.test.ts
index 625d30cb4..180da309d 100644
--- a/packages/graph-engine/tests/suites/nodes/math/add.test.ts
+++ b/packages/graph-engine/tests/suites/nodes/math/add.test.ts
@@ -1,10 +1,9 @@
-import { Graph } from '../../../../src/graph/graph.js';
 import { describe, expect, test } from 'vitest';
 import Node from '../../../../src/nodes/math/add.js';
 
 describe('math/add', () => {
 	test('adds two numbers', async () => {
-		const graph = new Graph();
+		const graph = getDataFlowGraph();
 		const node = new Node({ graph });
 
 		node.inputs.a.setValue(2);
diff --git a/packages/graph-engine/tests/suites/nodes/math/multiply.test.ts b/packages/graph-engine/tests/suites/nodes/math/multiply.test.ts
index d346ac659..c8369c9f1 100644
--- a/packages/graph-engine/tests/suites/nodes/math/multiply.test.ts
+++ b/packages/graph-engine/tests/suites/nodes/math/multiply.test.ts
@@ -1,10 +1,9 @@
-import { Graph } from '../../../../src/graph/graph.js';
 import { describe, expect, test } from 'vitest';
 import Node from '../../../../src/nodes/math/multiply.js';
 
 describe('math/mul', () => {
 	test('multiplies two numbers', async () => {
-		const graph = new Graph();
+		const graph = getDataFlowGraph();
 		const node = new Node({ graph });
 
 		node.inputs.a.setValue(1);
diff --git a/packages/graph-engine/tests/suites/nodes/math/multiplyVariadic.test.ts b/packages/graph-engine/tests/suites/nodes/math/multiplyVariadic.test.ts
index d1005ff62..a0a68f6d0 100644
--- a/packages/graph-engine/tests/suites/nodes/math/multiplyVariadic.test.ts
+++ b/packages/graph-engine/tests/suites/nodes/math/multiplyVariadic.test.ts
@@ -1,4 +1,3 @@
-import { Graph } from '../../../../src/graph/graph.js';
 import { describe, expect, test } from 'vitest';
 import Node from '../../../../src/nodes/math/multiplyVariadic.js';
 
@@ -12,7 +11,7 @@ describe('math/mul', () => {
 		expect(node.outputs.value.value).to.equal(2);
 	});
 	test('multiplies multiple numbers', async () => {
-		const graph = new Graph();
+		const graph = getDataFlowGraph();
 		const node = new Node({ graph });
 
 		node.inputs.inputs.setValue([8, 2, 2]);
diff --git a/packages/graph-engine/tests/suites/nodes/math/pow.test.ts b/packages/graph-engine/tests/suites/nodes/math/pow.test.ts
index 7d1bf2580..7a3169388 100644
--- a/packages/graph-engine/tests/suites/nodes/math/pow.test.ts
+++ b/packages/graph-engine/tests/suites/nodes/math/pow.test.ts
@@ -1,10 +1,9 @@
-import { Graph } from '../../../../src/graph/graph.js';
 import { describe, expect, test } from 'vitest';
 import Node from '../../../../src/nodes/math/pow.js';
 
 describe('math/pow', () => {
 	test('powers two numbers', async () => {
-		const graph = new Graph();
+		const graph = getDataFlowGraph();
 		const node = new Node({ graph });
 		node.inputs.base.setValue(2);
 		node.inputs.exponent.setValue(2);
diff --git a/packages/graph-engine/tests/suites/nodes/math/sub.test.ts b/packages/graph-engine/tests/suites/nodes/math/sub.test.ts
index af8ec580f..0cbc739ca 100644
--- a/packages/graph-engine/tests/suites/nodes/math/sub.test.ts
+++ b/packages/graph-engine/tests/suites/nodes/math/sub.test.ts
@@ -1,10 +1,9 @@
-import { Graph } from '../../../../src/graph/graph.js';
 import { describe, expect, test } from 'vitest';
 import Node from '../../../../src/nodes/math/subtract.js';
 
 describe('math/sub', () => {
 	test('subtracts two numbers', async () => {
-		const graph = new Graph();
+		const graph = getDataFlowGraph();
 		const node = new Node({ graph });
 		node.inputs.a.setValue(1);
 		node.inputs.b.setValue(2);
diff --git a/packages/graph-engine/tests/suites/nodes/network/delay.test.ts b/packages/graph-engine/tests/suites/nodes/network/delay.test.ts
new file mode 100644
index 000000000..430f23b31
--- /dev/null
+++ b/packages/graph-engine/tests/suites/nodes/network/delay.test.ts
@@ -0,0 +1,30 @@
+import { ControlFlowSpy, getFullyFeaturedGraph } from '@tests/utils/index.js';
+import { describe, expect, test } from 'vitest';
+import Node from '@/nodes/network/delay.js';
+
+describe('network/delay', () => {
+	test('provides the value after being triggered', async () => {
+		const graph = getFullyFeaturedGraph();
+		const node = new Node({ graph });
+		const spy = new ControlFlowSpy({ graph });
+
+		// Set the delay to 10ms
+		node.inputs.delay.setValue(10);
+
+		//Connect the delay node to the spy
+		node.outputs.value.connect(spy.inputs.value);
+
+		//Then trigger the value
+		node.inputs.value.trigger('foo');
+
+		//Create a promise to wait for the value to be triggered
+		await new Promise(resolve => {
+			setTimeout(() => {
+				//Expect the value to be triggered after the delay
+				expect(spy.spiedFunction).toBeCalledTimes(1);
+				expect(spy.spiedFunction.mock.calls[0][0]).toBe('foo');
+				resolve(0);
+			}, 10);
+		});
+	});
+});
diff --git a/packages/graph-engine/tests/suites/nodes/network/hold.test.ts b/packages/graph-engine/tests/suites/nodes/network/hold.test.ts
new file mode 100644
index 000000000..29a4b08a6
--- /dev/null
+++ b/packages/graph-engine/tests/suites/nodes/network/hold.test.ts
@@ -0,0 +1,14 @@
+import { StringSchema } from '../../../../src';
+import { describe, expect, test } from 'vitest';
+import { getFullyFeaturedGraph } from '@tests/utils/index.js';
+import Node from '@/nodes/network/hold.js';
+
+describe('network/hold', () => {
+	test('Holds the provided value', async () => {
+		const graph = getFullyFeaturedGraph();
+		const node = new Node({ graph });
+		//Then trigger the value
+		node.inputs.value.trigger('foo', StringSchema);
+		expect(node.outputs.value.value).to.equal('foo');
+	});
+});
diff --git a/packages/graph-engine/tests/suites/nodes/series/harmonic.test.ts b/packages/graph-engine/tests/suites/nodes/series/harmonic.test.ts
index 5671601f5..df10ada3a 100644
--- a/packages/graph-engine/tests/suites/nodes/series/harmonic.test.ts
+++ b/packages/graph-engine/tests/suites/nodes/series/harmonic.test.ts
@@ -1,10 +1,9 @@
-import { Graph } from '../../../../src/graph/graph.js';
 import { describe, expect, test } from 'vitest';
 import Node from '../../../../src/nodes/series/harmonic.js';
 
 describe('series/harmonic', () => {
 	test('generates the expected series', async () => {
-		const graph = new Graph();
+		const graph = getDataFlowGraph();
 		const node = new Node({ graph });
 
 		node.inputs.base.setValue(16);
diff --git a/packages/graph-engine/tests/utils/index.ts b/packages/graph-engine/tests/utils/index.ts
new file mode 100644
index 000000000..d3541cf20
--- /dev/null
+++ b/packages/graph-engine/tests/utils/index.ts
@@ -0,0 +1,43 @@
+import {
+	ApplyCapabilities,
+	ControlFlowCapabilityFactory,
+	ControlFlowNode,
+	Graph,
+	INodeDefinition,
+	WithControlFlow
+} from '@/index.js';
+import {
+	DataFlowCapabilityFactory,
+	WithDataFlow
+} from '@/capabilities/dataflow.js';
+import { vi } from 'vitest';
+
+export const getDataFlowGraph = () => {
+	const graph = new Graph();
+
+	graph.registerCapability(DataFlowCapabilityFactory);
+	return graph as ApplyCapabilities<Graph, [WithDataFlow]>;
+};
+
+export const getControlFlowGraph = () => {
+	const graph = new Graph();
+	graph.registerCapability(ControlFlowCapabilityFactory);
+	return graph as ApplyCapabilities<Graph, [WithControlFlow]>;
+};
+
+export const getFullyFeaturedGraph = () => {
+	const graph = new Graph();
+	graph.registerCapability(DataFlowCapabilityFactory);
+	graph.registerCapability(ControlFlowCapabilityFactory);
+	return graph as ApplyCapabilities<Graph, [WithDataFlow, WithControlFlow]>;
+};
+
+export class ControlFlowSpy extends ControlFlowNode {
+	public spiedFunction;
+
+	constructor(props: INodeDefinition) {
+		super(props);
+		this.spiedFunction = vi.fn();
+		this.controlflow.addInput('value', this.spiedFunction);
+	}
+}
diff --git a/packages/nodes-audio/src/nodes/base.ts b/packages/nodes-audio/src/nodes/base.ts
index fefa7a0db..33d84ac97 100644
--- a/packages/nodes-audio/src/nodes/base.ts
+++ b/packages/nodes-audio/src/nodes/base.ts
@@ -1,5 +1,5 @@
-import { Node } from '@tokens-studio/graph-engine';
-export class AudioBaseNode extends Node {
+import { DataflowNode } from '@tokens-studio/graph-engine';
+export class AudioBaseNode extends DataflowNode {
 	//All audio nodes need the web-audio capability
 	static annotations = {
 		'engine.capability.web-audio': true
diff --git a/packages/nodes-audio/src/nodes/connect.ts b/packages/nodes-audio/src/nodes/connect.ts
index 225d37710..f8044b69b 100644
--- a/packages/nodes-audio/src/nodes/connect.ts
+++ b/packages/nodes-audio/src/nodes/connect.ts
@@ -2,6 +2,7 @@ import { AudioBaseNode } from './base.js';
 import {
 	INodeDefinition,
 	ToInput,
+	ToOutput,
 	createVariadicSchema
 } from '@tokens-studio/graph-engine';
 import { NodeSchema } from '../schemas/index.js';
@@ -14,21 +15,24 @@ export class AudioConnectNode extends AudioBaseNode {
 		source: AudioNode[];
 		destination: AudioNode;
 	}>;
+	declare outputs: ToOutput<{
+		destination: AudioNode;
+	}>;
 
 	static description = 'An explicit connection between audio nodes';
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('source', {
+		this.dataflow.addInput('source', {
 			type: {
 				...createVariadicSchema(NodeSchema),
 				default: []
 			},
 			variadic: true
 		});
-		this.addInput('destination', {
+		this.dataflow.addInput('destination', {
 			type: NodeSchema
 		});
-		this.addOutput('destination', {
+		this.dataflow.addOutput('destination', {
 			type: NodeSchema
 		});
 	}
diff --git a/packages/nodes-audio/src/nodes/delay.ts b/packages/nodes-audio/src/nodes/delay.ts
index b76d720f4..d69a165b3 100644
--- a/packages/nodes-audio/src/nodes/delay.ts
+++ b/packages/nodes-audio/src/nodes/delay.ts
@@ -2,7 +2,8 @@ import { AudioBaseNode } from './base.js';
 import {
 	INodeDefinition,
 	NumberSchema,
-	ToInput
+	ToInput,
+	ToOutput
 } from '@tokens-studio/graph-engine';
 import { NodeSchema } from '../schemas/index.js';
 
@@ -17,10 +18,15 @@ export class AudioDelayNode extends AudioBaseNode {
 		delay: number;
 		input: AudioNode | undefined;
 	}>;
+
+	declare outputs: ToOutput<{
+		node: AudioNode;
+	}>;
+
 	static description = 'Modifies an audio source to provide delay.';
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('delay', {
+		this.dataflow.addInput('delay', {
 			type: {
 				...NumberSchema,
 				default: 1,
@@ -32,12 +38,12 @@ export class AudioDelayNode extends AudioBaseNode {
 				'ui.control': 'slider'
 			}
 		});
-		this.addInput('input', {
+		this.dataflow.addInput('input', {
 			type: NodeSchema,
 			visible: true
 		});
 
-		this.addOutput('node', {
+		this.dataflow.addOutput('node', {
 			visible: true,
 			type: {
 				...NodeSchema,
diff --git a/packages/nodes-audio/src/nodes/gain.ts b/packages/nodes-audio/src/nodes/gain.ts
index 58c247ef9..8caeb9b02 100644
--- a/packages/nodes-audio/src/nodes/gain.ts
+++ b/packages/nodes-audio/src/nodes/gain.ts
@@ -1,7 +1,7 @@
 import { AudioBaseNode } from './base.js';
 import { INodeDefinition, NumberSchema } from '@tokens-studio/graph-engine';
 import { NodeSchema } from '../schemas/index.js';
-import type { ToInput } from '@tokens-studio/graph-engine';
+import type { ToInput, ToOutput } from '@tokens-studio/graph-engine';
 
 export class AudioGainNode extends AudioBaseNode {
 	static title = 'Audio Gain node';
@@ -14,11 +14,16 @@ export class AudioGainNode extends AudioBaseNode {
 		gain: number;
 		input: AudioNode | undefined;
 	}>;
+
+	declare outputs: ToOutput<{
+		node: AudioNode;
+	}>;
+
 	static description =
 		'Modifies an audio source to provide a gain (volume) control.';
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('gain', {
+		this.dataflow.addInput('gain', {
 			type: {
 				...NumberSchema,
 				default: 1,
@@ -30,12 +35,12 @@ export class AudioGainNode extends AudioBaseNode {
 				'ui.control': 'slider'
 			}
 		});
-		this.addInput('input', {
+		this.dataflow.addInput('input', {
 			type: NodeSchema,
 			visible: true
 		});
 
-		this.addOutput('node', {
+		this.dataflow.addOutput('node', {
 			visible: true,
 			type: {
 				...NodeSchema,
diff --git a/packages/nodes-audio/src/nodes/loadBuffer.ts b/packages/nodes-audio/src/nodes/loadBuffer.ts
index cad995a36..8c337164a 100644
--- a/packages/nodes-audio/src/nodes/loadBuffer.ts
+++ b/packages/nodes-audio/src/nodes/loadBuffer.ts
@@ -1,7 +1,8 @@
 import {
 	AnySchema,
 	INodeDefinition,
-	ToInput
+	ToInput,
+	ToOutput
 } from '@tokens-studio/graph-engine';
 import { AudioBaseNode } from './base.js';
 import { AudioBufferSchema } from '../schemas/index.js';
@@ -13,15 +14,20 @@ export class AudioLoadBufferNode extends AudioBaseNode {
 	declare inputs: ToInput<{
 		resource: Buffer;
 	}>;
+
+	declare outputs: ToOutput<{
+		buffer: AudioBuffer;
+	}>;
+
 	static description = 'Converts a buffer to an audio buffer';
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('resource', {
+		this.dataflow.addInput('resource', {
 			type: AnySchema,
 			visible: true
 		});
-		this.addOutput('buffer', {
+		this.dataflow.addOutput('buffer', {
 			visible: true,
 			type: AudioBufferSchema
 		});
diff --git a/packages/nodes-audio/src/nodes/oscillator.ts b/packages/nodes-audio/src/nodes/oscillator.ts
index d1029d75a..934d6ec10 100644
--- a/packages/nodes-audio/src/nodes/oscillator.ts
+++ b/packages/nodes-audio/src/nodes/oscillator.ts
@@ -3,7 +3,8 @@ import {
 	INodeDefinition,
 	NumberSchema,
 	StringSchema,
-	ToInput
+	ToInput,
+	ToOutput
 } from '@tokens-studio/graph-engine';
 import { NodeSchema } from '../schemas/index.js';
 
@@ -19,26 +20,30 @@ export class AudioOscillatorNode extends AudioBaseNode {
 		frequency: number;
 	}>;
 
+	declare outputs: ToOutput<{
+		node: AudioNode;
+	}>;
+
 	_values: { type?: string; frequency?: number } = {};
 
 	static description =
 		'Creates an oscillator node, a source representing a periodic waveform. It basically generates a constant tone.';
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('type', {
+		this.dataflow.addInput('type', {
 			type: {
 				...StringSchema,
 				enum: ['sawtooth', 'sine', 'square', 'triangle'],
 				default: 'sine'
 			}
 		});
-		this.addInput('frequency', {
+		this.dataflow.addInput('frequency', {
 			type: {
 				...NumberSchema,
 				default: 3000
 			}
 		});
-		this.addOutput('node', {
+		this.dataflow.addOutput('node', {
 			type: {
 				...NodeSchema,
 				description: 'The generated oscillator node'
diff --git a/packages/nodes-audio/src/nodes/output.ts b/packages/nodes-audio/src/nodes/output.ts
index 96fc3ad91..e9834e915 100644
--- a/packages/nodes-audio/src/nodes/output.ts
+++ b/packages/nodes-audio/src/nodes/output.ts
@@ -1,5 +1,5 @@
 import { AudioBaseNode } from './base.js';
-import { INodeDefinition } from '@tokens-studio/graph-engine';
+import { INodeDefinition, ToInput } from '@tokens-studio/graph-engine';
 import { NodeSchema } from '../schemas/index.js';
 
 export class AudioOutputNode extends AudioBaseNode {
@@ -8,11 +8,15 @@ export class AudioOutputNode extends AudioBaseNode {
 
 	_last: AudioNode | undefined;
 
+	declare inputs: ToInput<{
+		input: AudioNode;
+	}>;
+
 	static description =
 		'Provides access to the output of a the audio context. This is the final node in the audio graph.';
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('input', {
+		this.dataflow.addInput('input', {
 			visible: true,
 			type: NodeSchema
 		});
diff --git a/packages/nodes-audio/src/nodes/source.ts b/packages/nodes-audio/src/nodes/source.ts
index f413fc4c1..16ae7c8e7 100644
--- a/packages/nodes-audio/src/nodes/source.ts
+++ b/packages/nodes-audio/src/nodes/source.ts
@@ -3,7 +3,8 @@ import { AudioBufferSchema, NodeSchema } from '../schemas/index.js';
 import {
 	BooleanSchema,
 	INodeDefinition,
-	ToInput
+	ToInput,
+	ToOutput
 } from '@tokens-studio/graph-engine';
 
 export class AudioSourceNode extends AudioBaseNode {
@@ -21,19 +22,23 @@ export class AudioSourceNode extends AudioBaseNode {
 		loop?: boolean;
 	}>;
 
+	declare outputs: ToOutput<{
+		node: AudioNode;
+	}>;
+
 	_values: { buffer?: AudioBuffer; loop?: boolean } = {};
 
 	constructor(props: INodeDefinition) {
 		super(props);
 
-		this.addInput('buffer', {
+		this.dataflow.addInput('buffer', {
 			type: AudioBufferSchema,
 			visible: true
 		});
-		this.addInput('loop', {
+		this.dataflow.addInput('loop', {
 			type: BooleanSchema
 		});
-		this.addOutput('node', {
+		this.dataflow.addOutput('node', {
 			type: {
 				...NodeSchema,
 				description: 'The generated oscillator node'
diff --git a/packages/nodes-audio/src/nodes/whiteNoise.ts b/packages/nodes-audio/src/nodes/whiteNoise.ts
index f3d8bd3c5..d8d6a069a 100644
--- a/packages/nodes-audio/src/nodes/whiteNoise.ts
+++ b/packages/nodes-audio/src/nodes/whiteNoise.ts
@@ -3,7 +3,8 @@ import { AudioBufferSchema } from '../schemas/index.js';
 import {
 	INodeDefinition,
 	NumberSchema,
-	ToInput
+	ToInput,
+	ToOutput
 } from '@tokens-studio/graph-engine';
 
 export class AudioWhiteNoiseNode extends AudioBaseNode {
@@ -21,24 +22,28 @@ export class AudioWhiteNoiseNode extends AudioBaseNode {
 		channels: number;
 	}>;
 
+	declare outputs: ToOutput<{
+		buffer: AudioBuffer;
+	}>;
+
 	constructor(props: INodeDefinition) {
 		super(props);
 
-		this.addInput('channels', {
+		this.dataflow.addInput('channels', {
 			type: {
 				...NumberSchema,
 				default: 1
 			},
 			visible: true
 		});
-		this.addInput('length', {
+		this.dataflow.addInput('length', {
 			type: {
 				...NumberSchema,
 				default: 3
 			},
 			visible: true
 		});
-		this.addOutput('buffer', {
+		this.dataflow.addOutput('buffer', {
 			type: AudioBufferSchema,
 			visible: true
 		});
diff --git a/packages/nodes-design-tokens/src/nodes/arrayToSet.ts b/packages/nodes-design-tokens/src/nodes/arrayToSet.ts
index af3257155..9799434eb 100644
--- a/packages/nodes-design-tokens/src/nodes/arrayToSet.ts
+++ b/packages/nodes-design-tokens/src/nodes/arrayToSet.ts
@@ -1,6 +1,6 @@
 import {
+	DataflowNode,
 	INodeDefinition,
-	Node,
 	ToInput,
 	ToOutput
 } from '@tokens-studio/graph-engine';
@@ -9,17 +9,17 @@ import { TokenSchema, TokenSetSchema } from '../schemas/index.js';
 import { arrayOf } from '../schemas/utils.js';
 import type { DeepKeyTokenMap, SingleToken } from '@tokens-studio/types';
 
-export default class ArrayToSetNode extends Node {
+export default class ArrayToSetNode extends DataflowNode {
 	static title = 'Array of Tokens to Set';
 	static type = 'studio.tokens.design.arrayToSet';
 	static description = 'Converts an array of tokens to a set';
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('tokens', {
+		this.dataflow.addInput('tokens', {
 			type: arrayOf(TokenSchema)
 		});
-		this.addOutput('tokenSet', {
+		this.dataflow.addOutput('tokenSet', {
 			type: TokenSetSchema
 		});
 	}
diff --git a/packages/nodes-design-tokens/src/nodes/create.ts b/packages/nodes-design-tokens/src/nodes/create.ts
index 09ee25193..288f97f8c 100644
--- a/packages/nodes-design-tokens/src/nodes/create.ts
+++ b/packages/nodes-design-tokens/src/nodes/create.ts
@@ -1,6 +1,6 @@
 import {
+	DataflowNode,
 	INodeDefinition,
-	Node,
 	StringSchema,
 	ToInput,
 	ToOutput
@@ -19,14 +19,14 @@ const types = Object.values(TokenTypes)
 	.sort()
 	.filter(x => !excluded.includes(x));
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Create Design Token';
 	static type = 'studio.tokens.design.create';
 	static description = 'Creates a design token from inputs';
 
 	declare inputs: ToInput<{
 		name: string;
-		type: string;
+		type: TokenTypes;
 		value: string;
 		description?: string;
 		$extensions?: Record<string, unknown>;
@@ -37,31 +37,31 @@ export default class NodeDefinition extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('name', {
+		this.dataflow.addInput('name', {
 			type: StringSchema
 		});
-		this.addInput('type', {
+		this.dataflow.addInput('type', {
 			type: {
 				...StringSchema,
 				enum: types
 			}
 		});
-		this.addInput('value', {
+		this.dataflow.addInput('value', {
 			type: StringSchema
 		});
 
-		this.addInput('description', {
+		this.dataflow.addInput('description', {
 			type: StringSchema
 		});
 
-		this.addInput('$extensions', {
+		this.dataflow.addInput('$extensions', {
 			type: {
 				...ObjectSchema,
 				default: null
 			}
 		});
 
-		this.addOutput('token', {
+		this.dataflow.addOutput('token', {
 			type: TokenSchema
 		});
 	}
diff --git a/packages/nodes-design-tokens/src/nodes/createBorder.ts b/packages/nodes-design-tokens/src/nodes/createBorder.ts
index 7c745c2c8..281a029c9 100644
--- a/packages/nodes-design-tokens/src/nodes/createBorder.ts
+++ b/packages/nodes-design-tokens/src/nodes/createBorder.ts
@@ -1,6 +1,6 @@
 import {
+	DataflowNode,
 	INodeDefinition,
-	Node,
 	StringSchema,
 	ToInput,
 	ToOutput
@@ -8,7 +8,7 @@ import {
 import { TokenBorderSchema } from '../schemas/index.js';
 import type { TokenBorderValue } from '@tokens-studio/types';
 
-export default class CreateBorderNode extends Node {
+export default class CreateBorderNode extends DataflowNode {
 	static title = 'Create a Border';
 	static type = 'studio.tokens.design.createBorder';
 	static description = 'Creates a composite Border value from inputs';
@@ -25,17 +25,17 @@ export default class CreateBorderNode extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('color', {
+		this.dataflow.addInput('color', {
 			type: StringSchema
 		});
-		this.addInput('width', {
+		this.dataflow.addInput('width', {
 			type: StringSchema
 		});
-		this.addInput('style', {
+		this.dataflow.addInput('style', {
 			type: StringSchema
 		});
 
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: TokenBorderSchema
 		});
 	}
diff --git a/packages/nodes-design-tokens/src/nodes/createBorderToken.ts b/packages/nodes-design-tokens/src/nodes/createBorderToken.ts
index 5ebab0583..153c00bb6 100644
--- a/packages/nodes-design-tokens/src/nodes/createBorderToken.ts
+++ b/packages/nodes-design-tokens/src/nodes/createBorderToken.ts
@@ -1,6 +1,6 @@
 import {
+	DataflowNode,
 	INodeDefinition,
-	Node,
 	ObjectSchema,
 	StringSchema,
 	ToInput,
@@ -15,7 +15,7 @@ import type {
 	TokenBorderValue
 } from '@tokens-studio/types';
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Create Border Design Token';
 	static type = 'studio.tokens.design.createBorderToken';
 	static description = 'Creates a design token from inputs';
@@ -33,30 +33,30 @@ export default class NodeDefinition extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('name', {
+		this.dataflow.addInput('name', {
 			type: StringSchema
 		});
 
-		this.addInput('reference', {
+		this.dataflow.addInput('reference', {
 			type: StringSchema
 		});
 
-		this.addInput('value', {
+		this.dataflow.addInput('value', {
 			type: arrayOf(TokenBorderSchema)
 		});
 
-		this.addInput('description', {
+		this.dataflow.addInput('description', {
 			type: StringSchema
 		});
 
-		this.addInput('$extensions', {
+		this.dataflow.addInput('$extensions', {
 			type: {
 				...ObjectSchema,
 				default: undefined
 			}
 		});
 
-		this.addOutput('token', {
+		this.dataflow.addOutput('token', {
 			type: TokenSchema
 		});
 	}
diff --git a/packages/nodes-design-tokens/src/nodes/createBoxShadow.ts b/packages/nodes-design-tokens/src/nodes/createBoxShadow.ts
index 6da520f4b..3ef3c396d 100644
--- a/packages/nodes-design-tokens/src/nodes/createBoxShadow.ts
+++ b/packages/nodes-design-tokens/src/nodes/createBoxShadow.ts
@@ -1,14 +1,14 @@
 import {
+	DataflowNode,
 	INodeDefinition,
-	Node,
 	StringSchema,
 	ToInput,
 	ToOutput
 } from '@tokens-studio/graph-engine';
 import { TokenBoxShadowSchema } from '../schemas/index.js';
-import type { TokenBoxshadowValue } from '@tokens-studio/types';
+import type { BoxShadowTypes, TokenBoxshadowValue } from '@tokens-studio/types';
 
-export default class CreateBoxShadowNode extends Node {
+export default class CreateBoxShadowNode extends DataflowNode {
 	static title = 'Create a Box Shadow';
 	static type = 'studio.tokens.design.createBoxShadow';
 	static description = 'Creates a composite box shadow value from inputs';
@@ -19,7 +19,8 @@ export default class CreateBoxShadowNode extends Node {
 		blur: string;
 		spread: string;
 		color: string;
-		type: string;
+		type: BoxShadowTypes;
+		blendMode?: string;
 	}>;
 
 	declare outputs: ToOutput<{
@@ -28,25 +29,28 @@ export default class CreateBoxShadowNode extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('x', {
+		this.dataflow.addInput('x', {
 			type: StringSchema
 		});
-		this.addInput('y', {
+		this.dataflow.addInput('y', {
 			type: StringSchema
 		});
-		this.addInput('blur', {
+		this.dataflow.addInput('blur', {
 			type: StringSchema
 		});
-		this.addInput('spread', {
+		this.dataflow.addInput('spread', {
 			type: StringSchema
 		});
-		this.addInput('color', {
+		this.dataflow.addInput('color', {
 			type: StringSchema
 		});
-		this.addInput('type', {
+		this.dataflow.addInput('type', {
 			type: StringSchema
 		});
-		this.addOutput('value', {
+		this.dataflow.addInput('blendMode', {
+			type: StringSchema
+		});
+		this.dataflow.addOutput('value', {
 			type: TokenBoxShadowSchema
 		});
 	}
diff --git a/packages/nodes-design-tokens/src/nodes/createBoxShadowToken.ts b/packages/nodes-design-tokens/src/nodes/createBoxShadowToken.ts
index b2cf68ad1..8cfb84807 100644
--- a/packages/nodes-design-tokens/src/nodes/createBoxShadowToken.ts
+++ b/packages/nodes-design-tokens/src/nodes/createBoxShadowToken.ts
@@ -1,6 +1,6 @@
 import {
+	DataflowNode,
 	INodeDefinition,
-	Node,
 	ObjectSchema,
 	StringSchema,
 	ToInput,
@@ -15,7 +15,7 @@ import type {
 	TokenBoxshadowValue
 } from '@tokens-studio/types';
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Create Box Shadow Design Token';
 	static type = 'studio.tokens.design.createBoxShadowToken';
 	static description = 'Creates a design token from inputs';
@@ -34,30 +34,30 @@ export default class NodeDefinition extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('name', {
+		this.dataflow.addInput('name', {
 			type: StringSchema
 		});
 
-		this.addInput('reference', {
+		this.dataflow.addInput('reference', {
 			type: StringSchema
 		});
 
-		this.addInput('value', {
+		this.dataflow.addInput('value', {
 			type: arrayOf(TokenBoxShadowSchema)
 		});
 
-		this.addInput('description', {
+		this.dataflow.addInput('description', {
 			type: StringSchema
 		});
 
-		this.addInput('$extensions', {
+		this.dataflow.addInput('$extensions', {
 			type: {
 				...ObjectSchema,
 				default: undefined
 			}
 		});
 
-		this.addOutput('token', {
+		this.dataflow.addOutput('token', {
 			type: TokenSchema
 		});
 	}
diff --git a/packages/nodes-design-tokens/src/nodes/createTypography.ts b/packages/nodes-design-tokens/src/nodes/createTypography.ts
index a28ac2573..0223a3be4 100644
--- a/packages/nodes-design-tokens/src/nodes/createTypography.ts
+++ b/packages/nodes-design-tokens/src/nodes/createTypography.ts
@@ -1,6 +1,6 @@
 import {
+	DataflowNode,
 	INodeDefinition,
-	Node,
 	StringSchema,
 	ToInput,
 	ToOutput
@@ -8,7 +8,7 @@ import {
 import { TokenTypographySchema } from '../schemas/index.js';
 import type { TokenTypographyValue } from '@tokens-studio/types';
 
-export default class CreateTypographyNode extends Node {
+export default class CreateTypographyNode extends DataflowNode {
 	static title = 'Create a Typography';
 	static type = 'studio.tokens.design.createTypography';
 	static description = 'Creates a composite typography value from inputs';
@@ -30,33 +30,33 @@ export default class CreateTypographyNode extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('fontFamily', {
+		this.dataflow.addInput('fontFamily', {
 			type: StringSchema
 		});
-		this.addInput('fontWeight', {
+		this.dataflow.addInput('fontWeight', {
 			type: StringSchema
 		});
-		this.addInput('fontSize', {
+		this.dataflow.addInput('fontSize', {
 			type: StringSchema
 		});
 
-		this.addInput('lineHeight', {
+		this.dataflow.addInput('lineHeight', {
 			type: StringSchema
 		});
-		this.addInput('letterSpacing', {
+		this.dataflow.addInput('letterSpacing', {
 			type: StringSchema
 		});
-		this.addInput('paragraphSpacing', {
+		this.dataflow.addInput('paragraphSpacing', {
 			type: StringSchema
 		});
-		this.addInput('textDecoration', {
+		this.dataflow.addInput('textDecoration', {
 			type: StringSchema
 		});
-		this.addInput('textCase', {
+		this.dataflow.addInput('textCase', {
 			type: StringSchema
 		});
 
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: TokenTypographySchema
 		});
 	}
diff --git a/packages/nodes-design-tokens/src/nodes/createTypographyToken.ts b/packages/nodes-design-tokens/src/nodes/createTypographyToken.ts
index c612f8579..e1996d7ed 100644
--- a/packages/nodes-design-tokens/src/nodes/createTypographyToken.ts
+++ b/packages/nodes-design-tokens/src/nodes/createTypographyToken.ts
@@ -1,20 +1,20 @@
 import {
+	DataflowNode,
 	INodeDefinition,
-	Node,
 	ObjectSchema,
 	StringSchema,
 	ToInput,
 	ToOutput
 } from '@tokens-studio/graph-engine';
 import {
-	SingleToken,
+	SingleTypographyToken,
 	SingleTypographyToken,
 	TokenTypes,
-	TypographyValues
+	TokenTypographyValue
 } from '@tokens-studio/types';
 import { TokenSchema, TokenTypographySchema } from '../schemas/index.js';
 
-export default class NodeDefinition extends Node {
+export default class NodeDefinition extends DataflowNode {
 	static title = 'Create Typography Design Token';
 	static type = 'studio.tokens.design.createTypographyToken';
 	static description = 'Creates a design token from inputs';
@@ -22,41 +22,41 @@ export default class NodeDefinition extends Node {
 	declare inputs: ToInput<{
 		name: string;
 		reference?: string;
-		value?: TypographyValues;
+		value?: TokenTypographyValue;
 		description?: string;
 		$extensions?: Record<string, unknown>;
 	}>;
 
 	declare outputs: ToOutput<{
-		token: SingleToken;
+		token: SingleTypographyToken;
 	}>;
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('name', {
+		this.dataflow.addInput('name', {
 			type: StringSchema
 		});
 
-		this.addInput('reference', {
+		this.dataflow.addInput('reference', {
 			type: StringSchema
 		});
 
-		this.addInput('value', {
+		this.dataflow.addInput('value', {
 			type: TokenTypographySchema
 		});
 
-		this.addInput('description', {
+		this.dataflow.addInput('description', {
 			type: StringSchema
 		});
 
-		this.addInput('$extensions', {
+		this.dataflow.addInput('$extensions', {
 			type: {
 				...ObjectSchema,
 				default: undefined
 			}
 		});
 
-		this.addOutput('token', {
+		this.dataflow.addOutput('token', {
 			type: TokenSchema
 		});
 	}
diff --git a/packages/nodes-design-tokens/src/nodes/destructToken.ts b/packages/nodes-design-tokens/src/nodes/destructToken.ts
index ba2276d84..beff9d44a 100644
--- a/packages/nodes-design-tokens/src/nodes/destructToken.ts
+++ b/packages/nodes-design-tokens/src/nodes/destructToken.ts
@@ -1,6 +1,6 @@
 import {
+	DataflowNode,
 	INodeDefinition,
-	Node,
 	ObjectSchema,
 	StringSchema,
 	ToInput,
@@ -21,7 +21,7 @@ import type {
 	TokenTypographyValue
 } from '@tokens-studio/types';
 
-export default class CreateBorderNode extends Node {
+export default class CreateBorderNode extends DataflowNode {
 	static title = 'Destruct token';
 	static type = 'studio.tokens.design.destruct';
 	static description = 'Breaks down a token into its parts';
@@ -43,34 +43,34 @@ export default class CreateBorderNode extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('token', {
+		this.dataflow.addInput('token', {
 			type: TokenSchema
 		});
 
-		this.addOutput('name', {
+		this.dataflow.addOutput('name', {
 			type: StringSchema
 		});
-		this.addOutput('description', {
+		this.dataflow.addOutput('description', {
 			type: StringSchema
 		});
-		this.addOutput('type', {
+		this.dataflow.addOutput('type', {
 			type: StringSchema
 		});
-		this.addOutput('$extensions', {
+		this.dataflow.addOutput('$extensions', {
 			type: ObjectSchema
 		});
 
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: StringSchema
 		});
 
-		this.addOutput('border', {
+		this.dataflow.addOutput('border', {
 			type: TokenBorderSchema
 		});
-		this.addOutput('typography', {
+		this.dataflow.addOutput('typography', {
 			type: TokenTypographySchema
 		});
-		this.addOutput('boxShadow', {
+		this.dataflow.addOutput('boxShadow', {
 			type: arrayOf(TokenBoxShadowSchema)
 		});
 	}
diff --git a/packages/nodes-design-tokens/src/nodes/externalTokens.ts b/packages/nodes-design-tokens/src/nodes/externalTokens.ts
index 74d6bd05d..3e24f4970 100644
--- a/packages/nodes-design-tokens/src/nodes/externalTokens.ts
+++ b/packages/nodes-design-tokens/src/nodes/externalTokens.ts
@@ -1,12 +1,12 @@
 import {
+	DataflowNode,
 	INodeDefinition,
-	Node,
 	StringSchema
 } from '@tokens-studio/graph-engine';
 import { TokenSchema } from '../schemas/index.js';
 import { arrayOf } from '../schemas/utils.js';
 
-export default class ExternalTokensNode extends Node {
+export default class ExternalTokensNode extends DataflowNode {
 	static title = 'External Token Set';
 	static type = 'studio.tokens.design.externalSet';
 	static description =
@@ -14,10 +14,10 @@ export default class ExternalTokensNode extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('uri', {
+		this.dataflow.addInput('uri', {
 			type: StringSchema
 		});
-		this.addOutput('tokenSet', {
+		this.dataflow.addOutput('tokenSet', {
 			type: arrayOf(TokenSchema)
 		});
 	}
diff --git a/packages/nodes-design-tokens/src/nodes/extractSingleToken.ts b/packages/nodes-design-tokens/src/nodes/extractSingleToken.ts
index 892752461..92c31830b 100644
--- a/packages/nodes-design-tokens/src/nodes/extractSingleToken.ts
+++ b/packages/nodes-design-tokens/src/nodes/extractSingleToken.ts
@@ -1,7 +1,7 @@
 import {
 	BooleanSchema,
+	DataflowNode,
 	INodeDefinition,
-	Node,
 	StringSchema,
 	ToInput,
 	ToOutput
@@ -10,7 +10,7 @@ import { SingleToken } from '@tokens-studio/types';
 import { TokenSchema } from '../schemas/index.js';
 import { arrayOf } from '../schemas/utils.js';
 
-export default class ExtractTokenNode extends Node {
+export default class ExtractTokenNode extends DataflowNode {
 	static title = 'Extract token ';
 	static type = 'studio.tokens.design.extractToken';
 	static description = 'Extracts a token from a token set';
@@ -26,16 +26,16 @@ export default class ExtractTokenNode extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('tokens', {
+		this.dataflow.addInput('tokens', {
 			type: arrayOf(TokenSchema)
 		});
-		this.addInput('name', {
+		this.dataflow.addInput('name', {
 			type: StringSchema
 		});
-		this.addOutput('found', {
+		this.dataflow.addOutput('found', {
 			type: BooleanSchema
 		});
-		this.addOutput('token', {
+		this.dataflow.addOutput('token', {
 			type: TokenSchema
 		});
 	}
diff --git a/packages/nodes-design-tokens/src/nodes/flatten.ts b/packages/nodes-design-tokens/src/nodes/flatten.ts
index 67ded9b28..896a2008d 100644
--- a/packages/nodes-design-tokens/src/nodes/flatten.ts
+++ b/packages/nodes-design-tokens/src/nodes/flatten.ts
@@ -1,6 +1,6 @@
 import {
+	DataflowNode,
 	INodeDefinition,
-	Node,
 	ToInput,
 	ToOutput
 } from '@tokens-studio/graph-engine';
@@ -8,7 +8,7 @@ import { SingleToken } from '@tokens-studio/types';
 import { TokenSchema } from '../schemas/index.js';
 import { arrayOf } from '../schemas/utils.js';
 
-export default class FlattenNode extends Node {
+export default class FlattenNode extends DataflowNode {
 	static title = 'Flatten Token Sets';
 	static type = 'studio.tokens.design.flatten';
 	static description = 'Flattens a set of tokens';
@@ -23,13 +23,13 @@ export default class FlattenNode extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('arrayOfTokens', {
+		this.dataflow.addInput('arrayOfTokens', {
 			type: {
 				...arrayOf(arrayOf(TokenSchema)),
 				default: []
 			}
 		});
-		this.addOutput('tokens', {
+		this.dataflow.addOutput('tokens', {
 			type: arrayOf(TokenSchema)
 		});
 	}
diff --git a/packages/nodes-design-tokens/src/nodes/group.ts b/packages/nodes-design-tokens/src/nodes/group.ts
index 9da3eed42..fb892e5ec 100644
--- a/packages/nodes-design-tokens/src/nodes/group.ts
+++ b/packages/nodes-design-tokens/src/nodes/group.ts
@@ -1,6 +1,6 @@
 import {
+	DataflowNode,
 	INodeDefinition,
-	Node,
 	StringSchema,
 	ToInput,
 	ToOutput
@@ -8,7 +8,7 @@ import {
 import { TokenSetSchema } from '../schemas/index.js';
 import type { DeepKeyTokenMap } from '@tokens-studio/types';
 
-export default class GroupNode extends Node {
+export default class GroupNode extends DataflowNode {
 	static title = 'Group tokens';
 	static type = 'studio.tokens.design.group';
 	static description = 'Groups tokens by adding a namespace';
@@ -24,13 +24,13 @@ export default class GroupNode extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('name', {
+		this.dataflow.addInput('name', {
 			type: StringSchema
 		});
-		this.addInput('tokenSet', {
+		this.dataflow.addInput('tokenSet', {
 			type: TokenSetSchema
 		});
-		this.addOutput('tokenSet', {
+		this.dataflow.addOutput('tokenSet', {
 			type: TokenSetSchema
 		});
 	}
diff --git a/packages/nodes-design-tokens/src/nodes/index.ts b/packages/nodes-design-tokens/src/nodes/index.ts
index ad8399e61..6c8afffd8 100644
--- a/packages/nodes-design-tokens/src/nodes/index.ts
+++ b/packages/nodes-design-tokens/src/nodes/index.ts
@@ -22,12 +22,11 @@ import SetToArrayNode from './setToArray.js';
 import UngroupNode from './ungroup.js';
 import arrayToSet from './arrayToSet.js';
 import create from './create.js';
-import type { Node } from '@tokens-studio/graph-engine';
 
 /**
  * All nodes in the system available as an array
  */
-export const nodes: (typeof Node)[] = ([] as (typeof Node)[]).concat(
+export const nodes = [].concat(
 	arrayToSet,
 	ExtractTokenNode,
 
diff --git a/packages/nodes-design-tokens/src/nodes/inlineTokens.ts b/packages/nodes-design-tokens/src/nodes/inlineTokens.ts
index 226a9e29e..ffa16f6d1 100644
--- a/packages/nodes-design-tokens/src/nodes/inlineTokens.ts
+++ b/packages/nodes-design-tokens/src/nodes/inlineTokens.ts
@@ -1,6 +1,6 @@
 import {
+	DataflowNode,
 	INodeDefinition,
-	Node,
 	ToInput,
 	ToOutput
 } from '@tokens-studio/graph-engine';
@@ -8,7 +8,7 @@ import { TokenSchema } from '../schemas/index.js';
 import { arrayOf } from '../schemas/utils.js';
 import type { SingleToken } from '@tokens-studio/types';
 
-export default class InlineTokenNode extends Node {
+export default class InlineTokenNode extends DataflowNode {
 	static title = 'Inline Tokens';
 	static type = 'studio.tokens.design.inline';
 	static description =
@@ -24,11 +24,11 @@ export default class InlineTokenNode extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('value', {
+		this.dataflow.addInput('value', {
 			type: arrayOf(TokenSchema),
 			visible: false
 		});
-		this.addOutput('tokens', {
+		this.dataflow.addOutput('tokens', {
 			type: arrayOf(TokenSchema)
 		});
 	}
diff --git a/packages/nodes-design-tokens/src/nodes/invert.ts b/packages/nodes-design-tokens/src/nodes/invert.ts
index 922620c88..90c202d56 100644
--- a/packages/nodes-design-tokens/src/nodes/invert.ts
+++ b/packages/nodes-design-tokens/src/nodes/invert.ts
@@ -1,6 +1,6 @@
 import {
+	DataflowNode,
 	INodeDefinition,
-	Node,
 	ToInput,
 	ToOutput
 } from '@tokens-studio/graph-engine';
@@ -8,7 +8,7 @@ import { SingleToken } from '@tokens-studio/types';
 import { TokenSchema } from '../schemas/index.js';
 import { arrayOf } from '../schemas/utils.js';
 
-export default class InvertNode extends Node {
+export default class InvertNode extends DataflowNode {
 	static title = 'Invert Token Set';
 	static type = 'studio.tokens.design.invert';
 	static description = 'Inverts the order of a set of tokens';
@@ -22,10 +22,10 @@ export default class InvertNode extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('tokens', {
+		this.dataflow.addInput('tokens', {
 			type: arrayOf(TokenSchema)
 		});
-		this.addOutput('tokens', {
+		this.dataflow.addOutput('tokens', {
 			type: arrayOf(TokenSchema)
 		});
 	}
diff --git a/packages/nodes-design-tokens/src/nodes/leonardoColor.ts b/packages/nodes-design-tokens/src/nodes/leonardoColor.ts
index 8ea059985..72352e093 100644
--- a/packages/nodes-design-tokens/src/nodes/leonardoColor.ts
+++ b/packages/nodes-design-tokens/src/nodes/leonardoColor.ts
@@ -2,8 +2,8 @@ import {
 	BooleanSchema,
 	Color,
 	ColorSchema,
+	DataflowNode,
 	INodeDefinition,
-	Node,
 	NumberSchema,
 	StringSchema,
 	ToInput,
@@ -22,26 +22,26 @@ export type LeonardoColor = {
 	smooth: boolean;
 };
 
-export default class LeonardoColorNode extends Node {
+export default class LeonardoColorNode extends DataflowNode {
 	static title = 'Leonardo Color';
 	static type = 'studio.tokens.design.leonardo.color';
 	static description = 'Creates a leonardo color';
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('name', {
+		this.dataflow.addInput('name', {
 			type: StringSchema
 		});
-		this.addInput('colorKeys', {
+		this.dataflow.addInput('colorKeys', {
 			type: arrayOf(ColorSchema)
 		});
-		this.addInput('ratios', {
+		this.dataflow.addInput('ratios', {
 			type: arrayOf(NumberSchema)
 		});
 
-		this.addInput('smooth', {
+		this.dataflow.addInput('smooth', {
 			type: BooleanSchema
 		});
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: LeonardoColorSchema
 		});
 	}
diff --git a/packages/nodes-design-tokens/src/nodes/leonardoTheme.ts b/packages/nodes-design-tokens/src/nodes/leonardoTheme.ts
index 5b4a6c7d0..9400ffdf5 100644
--- a/packages/nodes-design-tokens/src/nodes/leonardoTheme.ts
+++ b/packages/nodes-design-tokens/src/nodes/leonardoTheme.ts
@@ -2,8 +2,8 @@ import { BackgroundColor, Color, Theme } from '@adobe/leonardo-contrast-colors';
 import {
 	ColorSchema,
 	Color as ColorType,
+	DataflowNode,
 	INodeDefinition,
-	Node,
 	NumberSchema,
 	ToInput,
 	ToOutput,
@@ -13,29 +13,29 @@ import { LeonardoColor } from './leonardoColor.js';
 import { LeonardoColorSchema } from '../schemas/index.js';
 import { arrayOf } from '../schemas/utils.js';
 
-export default class LeonardoThemeNode extends Node {
+export default class LeonardoThemeNode extends DataflowNode {
 	static title = 'Leonardo Theme';
 	static type = 'studio.tokens.design.leonardo.theme';
 	static description = 'Creates a leonardo theme';
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('colors', {
+		this.dataflow.addInput('colors', {
 			type: arrayOf(LeonardoColorSchema)
 		});
-		this.addInput('contrast', {
+		this.dataflow.addInput('contrast', {
 			type: NumberSchema
 		});
-		this.addInput('lightness', {
+		this.dataflow.addInput('lightness', {
 			type: NumberSchema
 		});
-		this.addInput('saturation', {
+		this.dataflow.addInput('saturation', {
 			type: NumberSchema
 		});
-		this.addInput('backgroundColor', {
+		this.dataflow.addInput('backgroundColor', {
 			type: LeonardoColorSchema
 		});
 
-		this.addOutput('colors', {
+		this.dataflow.addOutput('colors', {
 			type: arrayOf(ColorSchema)
 		});
 	}
diff --git a/packages/nodes-design-tokens/src/nodes/name.ts b/packages/nodes-design-tokens/src/nodes/name.ts
index c5b8d1bdc..37b805e9b 100644
--- a/packages/nodes-design-tokens/src/nodes/name.ts
+++ b/packages/nodes-design-tokens/src/nodes/name.ts
@@ -1,6 +1,6 @@
 import {
+	DataflowNode,
 	INodeDefinition,
-	Node,
 	ToInput,
 	ToOutput
 } from '@tokens-studio/graph-engine';
@@ -8,7 +8,7 @@ import { TokenSchema } from '../schemas/index.js';
 import { arrayOf } from '../schemas/utils.js';
 import type { SingleToken } from '@tokens-studio/types';
 
-export default class NameTokensNode extends Node {
+export default class NameTokensNode extends DataflowNode {
 	static title = 'Name tokens';
 	static type = 'studio.tokens.design.nameTokens';
 	static description = 'Names an array of tokens by their index';
@@ -23,10 +23,10 @@ export default class NameTokensNode extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('tokens', {
+		this.dataflow.addInput('tokens', {
 			type: arrayOf(TokenSchema)
 		});
-		this.addOutput('tokens', {
+		this.dataflow.addOutput('tokens', {
 			type: arrayOf(TokenSchema)
 		});
 	}
diff --git a/packages/nodes-design-tokens/src/nodes/previewTypography.ts b/packages/nodes-design-tokens/src/nodes/previewTypography.ts
index 7209495e6..119512a51 100644
--- a/packages/nodes-design-tokens/src/nodes/previewTypography.ts
+++ b/packages/nodes-design-tokens/src/nodes/previewTypography.ts
@@ -1,8 +1,8 @@
-import { Node, StringSchema } from '@tokens-studio/graph-engine';
+import { DataflowNode, StringSchema } from '@tokens-studio/graph-engine';
 import { TokenSchema } from '../schemas/index.js';
 import { arrayOf } from '../schemas/utils.js';
 
-export default class NearestColorNode extends Node {
+export default class NearestColorNode extends DataflowNode {
 	static title = 'Preview Typography';
 	static type = 'studio.tokens.preview.typography';
 	static description = 'Previews typographic tokens';
@@ -10,10 +10,10 @@ export default class NearestColorNode extends Node {
 	constructor(props) {
 		super(props);
 
-		this.addInput('value', {
+		this.dataflow.addInput('value', {
 			type: arrayOf(TokenSchema)
 		});
-		this.addInput('text', {
+		this.dataflow.addInput('text', {
 			type: {
 				...StringSchema,
 				default: 'The quick brown fox jumps over the lazy dog'
diff --git a/packages/nodes-design-tokens/src/nodes/resolve.ts b/packages/nodes-design-tokens/src/nodes/resolve.ts
index eaeaa2225..9c712e4f3 100644
--- a/packages/nodes-design-tokens/src/nodes/resolve.ts
+++ b/packages/nodes-design-tokens/src/nodes/resolve.ts
@@ -1,6 +1,6 @@
 import {
+	DataflowNode,
 	INodeDefinition,
-	Node,
 	ToInput,
 	ToOutput
 } from '@tokens-studio/graph-engine';
@@ -37,7 +37,7 @@ const resolveValues = (tokens: IResolvedToken[], context: IResolvedToken[]) => {
 	return flatten(resolved);
 };
 
-export default class ResolveNode extends Node {
+export default class ResolveNode extends DataflowNode {
 	static title = 'Resolve tokens';
 	static type = 'studio.tokens.design.resolve';
 	static description = 'Resolves a set of tokens';
@@ -52,13 +52,13 @@ export default class ResolveNode extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('inputs', {
+		this.dataflow.addInput('inputs', {
 			type: arrayOf(arrayOf(TokenSchema))
 		});
-		this.addInput('context', {
+		this.dataflow.addInput('context', {
 			type: arrayOf(arrayOf(TokenSchema))
 		});
-		this.addOutput('value', {
+		this.dataflow.addOutput('value', {
 			type: arrayOf(TokenSchema)
 		});
 	}
diff --git a/packages/nodes-design-tokens/src/nodes/setToArray.ts b/packages/nodes-design-tokens/src/nodes/setToArray.ts
index 6d5075b4a..43f21eb41 100644
--- a/packages/nodes-design-tokens/src/nodes/setToArray.ts
+++ b/packages/nodes-design-tokens/src/nodes/setToArray.ts
@@ -1,6 +1,6 @@
 import {
+	DataflowNode,
 	INodeDefinition,
-	Node,
 	ToInput,
 	ToOutput
 } from '@tokens-studio/graph-engine';
@@ -9,7 +9,7 @@ import { arrayOf } from '../schemas/utils.js';
 import { flatten } from '../utils/index.js';
 import type { DeepKeyTokenMap, SingleToken } from '@tokens-studio/types';
 
-export default class SetToArrayNode extends Node {
+export default class SetToArrayNode extends DataflowNode {
 	static title = 'Token set to token array ';
 	static type = 'studio.tokens.design.setToArray';
 	static description = 'Converts a token set to an array of tokens';
@@ -24,10 +24,10 @@ export default class SetToArrayNode extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('tokenSet', {
+		this.dataflow.addInput('tokenSet', {
 			type: TokenSetSchema
 		});
-		this.addOutput('tokens', {
+		this.dataflow.addOutput('tokens', {
 			type: arrayOf(TokenSchema)
 		});
 	}
diff --git a/packages/nodes-design-tokens/src/nodes/ungroup.ts b/packages/nodes-design-tokens/src/nodes/ungroup.ts
index 5d3d82f8c..1e9d4e806 100644
--- a/packages/nodes-design-tokens/src/nodes/ungroup.ts
+++ b/packages/nodes-design-tokens/src/nodes/ungroup.ts
@@ -1,14 +1,14 @@
-import { DeepKeyTokenMap } from '@tokens-studio/types';
 import {
+	DataflowNode,
 	INodeDefinition,
-	Node,
 	StringSchema,
 	ToInput,
 	ToOutput
 } from '@tokens-studio/graph-engine';
+import { DeepKeyTokenMap } from '@tokens-studio/types';
 import { TokenSetSchema } from '../schemas/index.js';
 
-export default class UngroupNode extends Node {
+export default class UngroupNode extends DataflowNode {
 	static title = 'Ungroup tokens';
 	static type = 'studio.tokens.design.ungroup';
 	static description = 'Ungroups tokens by removing their namespace';
@@ -24,13 +24,13 @@ export default class UngroupNode extends Node {
 
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('name', {
+		this.dataflow.addInput('name', {
 			type: StringSchema
 		});
-		this.addInput('tokenSet', {
+		this.dataflow.addInput('tokenSet', {
 			type: TokenSetSchema
 		});
-		this.addOutput('tokenSet', {
+		this.dataflow.addOutput('tokenSet', {
 			type: TokenSetSchema
 		});
 	}
diff --git a/packages/nodes-design-tokens/src/ui/controls/index.tsx b/packages/nodes-design-tokens/src/ui/controls/index.tsx
index b602ce3db..938b17704 100644
--- a/packages/nodes-design-tokens/src/ui/controls/index.tsx
+++ b/packages/nodes-design-tokens/src/ui/controls/index.tsx
@@ -4,11 +4,11 @@ import { TokenField } from './token.js';
 import { TokenSetField } from './tokenSet.js';
 import { VariadicTokenSet } from './variadicTokenSet.js';
 import { variadicMatcher } from '@tokens-studio/graph-editor';
-import type { Input, Port } from '@tokens-studio/graph-engine';
+import type { DataFlowPort, Input } from '@tokens-studio/graph-engine';
 
 export const controls = [
 	{
-		matcher: (port: Port) => {
+		matcher: (port: DataFlowPort) => {
 			const inputPort = port as Input;
 			return (
 				inputPort.type.type === 'array' &&
@@ -25,7 +25,7 @@ export const controls = [
 	},
 
 	{
-		matcher: (port: Port) => port.type.$id === TOKEN,
+		matcher: (port: DataFlowPort) => port.type.$id === TOKEN,
 		component: TokenField
 	},
 	{
diff --git a/packages/nodes-fs/src/capability/fs.ts b/packages/nodes-fs/src/capability/fs.ts
index 71917e379..da242a8cd 100644
--- a/packages/nodes-fs/src/capability/fs.ts
+++ b/packages/nodes-fs/src/capability/fs.ts
@@ -15,6 +15,10 @@ export interface FSCapability {
 	readdir: (path: string) => Promise<FSEntity[]>;
 }
 
+/**
+ * Reifier is a function that takes a graph and returns a capability.
+ * This will likely change depending on the environment the capability is running in, hence we do not make an opinionated choice here.
+ */
 export type Reifier = (graph: Graph) => FSCapability;
 
 export const FSCapabilityFactory = (reifier: Reifier): CapabilityFactory => {
diff --git a/packages/nodes-fs/src/nodes/getDirectoryListing.ts b/packages/nodes-fs/src/nodes/getDirectoryListing.ts
index 6d182c306..7e493e559 100644
--- a/packages/nodes-fs/src/nodes/getDirectoryListing.ts
+++ b/packages/nodes-fs/src/nodes/getDirectoryListing.ts
@@ -1,13 +1,13 @@
-import { FSCapability } from '../capability/fs.js';
 import {
+	DataflowNode,
 	INodeDefinition,
-	Node,
 	StringSchema
 } from '@tokens-studio/graph-engine';
+import { FSCapability } from '../capability/fs.js';
 import { arrayOf } from '../schemas/utils.js';
 import type { ToInput } from '@tokens-studio/graph-engine';
 
-export class GetDirectoryNode extends Node {
+export class GetDirectoryNode extends DataflowNode {
 	static title = 'Read directory';
 	static type = 'studio.tokens.fs.getDirectory';
 
@@ -17,14 +17,14 @@ export class GetDirectoryNode extends Node {
 	static description = 'Reads the directory of a path';
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('path', {
+		this.dataflow.addInput('path', {
 			type: StringSchema
 		});
 
-		this.addOutput('files', {
+		this.dataflow.addOutput('files', {
 			type: arrayOf(StringSchema)
 		});
-		this.addOutput('dirs', {
+		this.dataflow.addOutput('dirs', {
 			type: arrayOf(StringSchema)
 		});
 	}
diff --git a/packages/nodes-fs/src/nodes/getFile.ts b/packages/nodes-fs/src/nodes/getFile.ts
index f8e5be0b4..eb9244ab9 100644
--- a/packages/nodes-fs/src/nodes/getFile.ts
+++ b/packages/nodes-fs/src/nodes/getFile.ts
@@ -1,13 +1,13 @@
-import { FSCapability } from '../capability/fs.js';
-import { FileSchema } from '../schemas/index.js';
 import {
+	DataflowNode,
 	INodeDefinition,
-	Node,
 	StringSchema
 } from '@tokens-studio/graph-engine';
+import { FSCapability } from '../capability/fs.js';
+import { FileSchema } from '../schemas/index.js';
 import type { ToInput } from '@tokens-studio/graph-engine';
 
-export class GetFileNode extends Node {
+export class GetFileNode extends DataflowNode {
 	static title = 'Get File';
 	static type = 'studio.tokens.fs.getFile';
 
@@ -17,15 +17,15 @@ export class GetFileNode extends Node {
 	static description = 'Gets a file from the file system.';
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('path', {
+		this.dataflow.addInput('path', {
 			type: StringSchema
 		});
 
-		this.addOutput('file', {
+		this.dataflow.addOutput('file', {
 			type: FileSchema
 		});
 
-		this.addOutput('ext', {
+		this.dataflow.addOutput('ext', {
 			type: StringSchema
 		});
 	}
diff --git a/packages/nodes-fs/src/nodes/getJson.ts b/packages/nodes-fs/src/nodes/getJson.ts
index 167b4c59f..a648ad6c1 100644
--- a/packages/nodes-fs/src/nodes/getJson.ts
+++ b/packages/nodes-fs/src/nodes/getJson.ts
@@ -1,12 +1,12 @@
-import { FileSchema } from '../schemas/index.js';
 import {
+	DataflowNode,
 	INodeDefinition,
-	Node,
 	ObjectSchema
 } from '@tokens-studio/graph-engine';
+import { FileSchema } from '../schemas/index.js';
 import type { ToInput } from '@tokens-studio/graph-engine';
 
-export class GetJSONNode extends Node {
+export class GetJSONNode extends DataflowNode {
 	static title = 'Read file as json';
 	static type = 'studio.tokens.fs.getJson';
 
@@ -17,11 +17,11 @@ export class GetJSONNode extends Node {
 		'Reads the context of a file from the file system as a JSON object.';
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('file', {
+		this.dataflow.addInput('file', {
 			type: FileSchema
 		});
 
-		this.addOutput('contents', {
+		this.dataflow.addOutput('contents', {
 			type: ObjectSchema
 		});
 	}
diff --git a/packages/nodes-fs/src/nodes/getText.ts b/packages/nodes-fs/src/nodes/getText.ts
index 8623d1bab..3c6557d96 100644
--- a/packages/nodes-fs/src/nodes/getText.ts
+++ b/packages/nodes-fs/src/nodes/getText.ts
@@ -1,12 +1,12 @@
-import { FileSchema } from '../schemas/index.js';
 import {
+	DataflowNode,
 	INodeDefinition,
-	Node,
 	StringSchema
 } from '@tokens-studio/graph-engine';
+import { FileSchema } from '../schemas/index.js';
 import type { ToInput } from '@tokens-studio/graph-engine';
 
-export class GetTextNode extends Node {
+export class GetTextNode extends DataflowNode {
 	static title = 'Read file as text';
 	static type = 'studio.tokens.fs.getText';
 
@@ -16,11 +16,11 @@ export class GetTextNode extends Node {
 	static description = 'Reads the text context of a file from the file system.';
 	constructor(props: INodeDefinition) {
 		super(props);
-		this.addInput('file', {
+		this.dataflow.addInput('file', {
 			type: FileSchema
 		});
 
-		this.addOutput('contents', {
+		this.dataflow.addOutput('contents', {
 			type: StringSchema
 		});
 	}
diff --git a/packages/nodes-fs/src/nodes/index.ts b/packages/nodes-fs/src/nodes/index.ts
index 07b182b7c..04f819276 100644
--- a/packages/nodes-fs/src/nodes/index.ts
+++ b/packages/nodes-fs/src/nodes/index.ts
@@ -2,12 +2,11 @@ import { GetDirectoryNode } from './getDirectoryListing.js';
 import { GetFileNode } from './getFile.js';
 import { GetJSONNode } from './getJson.js';
 import { GetTextNode } from './getText.js';
-import type { Node } from '@tokens-studio/graph-engine';
 
 /**
  * All nodes in the system available as an array
  */
-export const nodes: (typeof Node)[] = ([] as (typeof Node)[]).concat(
+export const nodes = [].concat(
 	GetFileNode,
 	GetJSONNode,
 	GetTextNode,
diff --git a/packages/nodes-fs/src/ui/controls/index.tsx b/packages/nodes-fs/src/ui/controls/index.tsx
index 46a3db741..49f328f5b 100644
--- a/packages/nodes-fs/src/ui/controls/index.tsx
+++ b/packages/nodes-fs/src/ui/controls/index.tsx
@@ -1,10 +1,10 @@
 import { FILE } from '../../schemas/index.js';
 import { FileField } from './file.js';
-import type { Port } from '@tokens-studio/graph-engine';
+import type { DataFlowPort } from '@tokens-studio/graph-engine';
 
 export const controls = [
 	{
-		matcher: (port: Port) => port.type.$id === FILE,
+		matcher: (port: DataFlowPort) => port.type.$id === FILE,
 		component: FileField
 	}
 ];
diff --git a/packages/nodes-image/src/nodes/autoLevel.ts b/packages/nodes-image/src/nodes/autoLevel.ts
index ce6b46526..057db020e 100644
--- a/packages/nodes-image/src/nodes/autoLevel.ts
+++ b/packages/nodes-image/src/nodes/autoLevel.ts
@@ -1,6 +1,11 @@
 import { BaseNode } from "./base.js";
 import { IMagickImage } from "@imagemagick/magick-wasm";
-import { INodeDefinition, ToInput } from "@tokens-studio/graph-engine";
+import {
+  INodeDefinition,
+  ToInput,
+  ToOutput,
+} from "@tokens-studio/graph-engine";
+import { Image } from "../schemas/types.js";
 import { ImageSchema } from "../schemas/index.js";
 
 export class AutoLevelNode extends BaseNode {
@@ -8,15 +13,18 @@ export class AutoLevelNode extends BaseNode {
   static type = "studio.tokens.image.autoLevel";
 
   declare inputs: ToInput<{
-    image: ImageData;
+    image: Image;
+  }>;
+  declare outputs: ToOutput<{
+    image: Image;
   }>;
 
   constructor(props: INodeDefinition) {
     super(props);
-    this.addInput("image", {
+    this.dataflow.addInput("image", {
       type: ImageSchema,
     });
-    this.addOutput("image", {
+    this.dataflow.addOutput("image", {
       type: ImageSchema,
     });
   }
diff --git a/packages/nodes-image/src/nodes/autoOrient.ts b/packages/nodes-image/src/nodes/autoOrient.ts
index 7884af954..38b7b56d8 100644
--- a/packages/nodes-image/src/nodes/autoOrient.ts
+++ b/packages/nodes-image/src/nodes/autoOrient.ts
@@ -1,6 +1,11 @@
 import { BaseNode } from "./base.js";
 import { IMagickImage } from "@imagemagick/magick-wasm";
-import { INodeDefinition, ToInput } from "@tokens-studio/graph-engine";
+import {
+  INodeDefinition,
+  ToInput,
+  ToOutput,
+} from "@tokens-studio/graph-engine";
+import { Image } from "../schemas/types.js";
 import { ImageSchema } from "../schemas/index.js";
 
 export class AutoOrient extends BaseNode {
@@ -8,15 +13,19 @@ export class AutoOrient extends BaseNode {
   static type = "studio.tokens.image.autoOrient";
 
   declare inputs: ToInput<{
-    image: ImageData;
+    image: Image;
   }>;
 
+  declare outputs: ToOutput<{
+    image: Image;
+  }>;
   constructor(props: INodeDefinition) {
     super(props);
-    this.addInput("image", {
+    const df = this.dataflow;
+    df.addInput("image", {
       type: ImageSchema,
     });
-    this.addOutput("image", {
+    df.addOutput("image", {
       type: ImageSchema,
     });
   }
diff --git a/packages/nodes-image/src/nodes/base.ts b/packages/nodes-image/src/nodes/base.ts
index 11f420031..ebca2b069 100644
--- a/packages/nodes-image/src/nodes/base.ts
+++ b/packages/nodes-image/src/nodes/base.ts
@@ -1,8 +1,8 @@
+import { DataflowNode } from "@tokens-studio/graph-engine";
 import { Image } from "../schemas/types.js";
-import { Node } from "@tokens-studio/graph-engine";
 import type { ImageMagick } from "@imagemagick/magick-wasm";
 
-export class BaseNode extends Node {
+export class BaseNode extends DataflowNode {
   static annotations = {
     "engine.capability.imageMagick": true,
   };
diff --git a/packages/nodes-image/src/nodes/blur.ts b/packages/nodes-image/src/nodes/blur.ts
index 8e44fccd5..f5ed39d70 100644
--- a/packages/nodes-image/src/nodes/blur.ts
+++ b/packages/nodes-image/src/nodes/blur.ts
@@ -25,18 +25,18 @@ export class BlurNode extends BaseNode {
 
   constructor(props: INodeDefinition) {
     super(props);
-    this.addInput("image", {
+    this.dataflow.addInput("image", {
       type: ImageSchema,
     });
-    this.addInput("sigma", {
+    this.dataflow.addInput("sigma", {
       type: NumberSchema,
     });
 
-    this.addInput("radius", {
+    this.dataflow.addInput("radius", {
       type: NumberSchema,
     });
 
-    this.addOutput("image", {
+    this.dataflow.addOutput("image", {
       type: ImageSchema,
     });
   }
diff --git a/packages/nodes-image/src/nodes/charcoal.ts b/packages/nodes-image/src/nodes/charcoal.ts
index f74ad3fff..1a8cc6f20 100644
--- a/packages/nodes-image/src/nodes/charcoal.ts
+++ b/packages/nodes-image/src/nodes/charcoal.ts
@@ -4,7 +4,9 @@ import {
   INodeDefinition,
   NumberSchema,
   ToInput,
+  ToOutput,
 } from "@tokens-studio/graph-engine";
+import { Image } from "../schemas/types.js";
 import { ImageSchema } from "../schemas/index.js";
 
 export class CharcoalNode extends BaseNode {
@@ -18,25 +20,28 @@ export class CharcoalNode extends BaseNode {
     sigma: number;
     height: number;
   }>;
+  declare outputs: ToOutput<{
+    image: Image;
+  }>;
 
   constructor(props: INodeDefinition) {
     super(props);
-    this.addInput("image", {
+    this.dataflow.addInput("image", {
       type: ImageSchema,
     });
-    this.addInput("radius", {
+    this.dataflow.addInput("radius", {
       type: {
         ...NumberSchema,
         default: 0,
       },
     });
-    this.addInput("sigma", {
+    this.dataflow.addInput("sigma", {
       type: {
         ...NumberSchema,
         default: 0,
       },
     });
-    this.addOutput("image", {
+    this.dataflow.addOutput("image", {
       type: ImageSchema,
     });
   }
diff --git a/packages/nodes-image/src/nodes/compose.ts b/packages/nodes-image/src/nodes/compose.ts
index 4b9278b9f..a5574bfe9 100644
--- a/packages/nodes-image/src/nodes/compose.ts
+++ b/packages/nodes-image/src/nodes/compose.ts
@@ -4,6 +4,7 @@ import {
   INodeDefinition,
   StringSchema,
   ToInput,
+  ToOutput,
 } from "@tokens-studio/graph-engine";
 import { Image } from "../schemas/types.js";
 import { ImageSchema } from "../schemas/index.js";
@@ -91,16 +92,20 @@ export class ComposeNode extends BaseNode {
     operator: keyof typeof CompositeOperatorLookup;
   }>;
 
+  declare outputs: ToOutput<{
+    image: Image;
+  }>;
+
   constructor(props: INodeDefinition) {
     super(props);
-    this.addInput("a", {
+    this.dataflow.addInput("a", {
       type: ImageSchema,
     });
-    this.addInput("b", {
+    this.dataflow.addInput("b", {
       type: ImageSchema,
     });
 
-    this.addInput("operator", {
+    this.dataflow.addInput("operator", {
       type: {
         ...StringSchema,
         enum: Object.keys(CompositeOperatorLookup),
@@ -108,7 +113,7 @@ export class ComposeNode extends BaseNode {
       },
     });
 
-    this.addOutput("image", {
+    this.dataflow.addOutput("image", {
       type: ImageSchema,
     });
   }
diff --git a/packages/nodes-image/src/nodes/dither.ts b/packages/nodes-image/src/nodes/dither.ts
index 84b41b68a..d99f94e45 100644
--- a/packages/nodes-image/src/nodes/dither.ts
+++ b/packages/nodes-image/src/nodes/dither.ts
@@ -68,17 +68,17 @@ export class Dither extends BaseNode {
 
   constructor(props: INodeDefinition) {
     super(props);
-    this.addInput("image", {
+    this.dataflow.addInput("image", {
       type: ImageSchema,
     });
-    this.addInput("colors", {
+    this.dataflow.addInput("colors", {
       type: {
         ...NumberSchema,
         default: 32,
       },
     });
 
-    this.addInput("colorSpace", {
+    this.dataflow.addInput("colorSpace", {
       type: {
         ...StringSchema,
         enum: Object.keys(colorSpaceLookup),
@@ -86,7 +86,7 @@ export class Dither extends BaseNode {
       },
     });
 
-    this.addInput("ditherMethod", {
+    this.dataflow.addInput("ditherMethod", {
       type: {
         ...StringSchema,
         enum: Object.keys(ditherMethodLookup),
@@ -94,7 +94,7 @@ export class Dither extends BaseNode {
       },
     });
 
-    this.addOutput("image", {
+    this.dataflow.addOutput("image", {
       type: ImageSchema,
     });
   }
diff --git a/packages/nodes-image/src/nodes/flip.ts b/packages/nodes-image/src/nodes/flip.ts
index 848b90642..494a2c403 100644
--- a/packages/nodes-image/src/nodes/flip.ts
+++ b/packages/nodes-image/src/nodes/flip.ts
@@ -1,6 +1,11 @@
 import { BaseNode } from "./base.js";
 import { IMagickImage } from "@imagemagick/magick-wasm";
-import { INodeDefinition, ToInput } from "@tokens-studio/graph-engine";
+import {
+  INodeDefinition,
+  ToInput,
+  ToOutput,
+} from "@tokens-studio/graph-engine";
+import { Image } from "../schemas/types.js";
 import { ImageSchema } from "../schemas/index.js";
 
 export class FlipNode extends BaseNode {
@@ -8,15 +13,19 @@ export class FlipNode extends BaseNode {
   static type = "studio.tokens.image.flip";
 
   declare inputs: ToInput<{
-    image: ImageData;
+    image: Image;
+  }>;
+
+  declare outputs: ToOutput<{
+    image: Image;
   }>;
 
   constructor(props: INodeDefinition) {
     super(props);
-    this.addInput("image", {
+    this.dataflow.addInput("image", {
       type: ImageSchema,
     });
-    this.addOutput("image", {
+    this.dataflow.addOutput("image", {
       type: ImageSchema,
     });
   }
diff --git a/packages/nodes-image/src/nodes/flop.ts b/packages/nodes-image/src/nodes/flop.ts
index 6a280d6f1..b3ec50fc0 100644
--- a/packages/nodes-image/src/nodes/flop.ts
+++ b/packages/nodes-image/src/nodes/flop.ts
@@ -1,21 +1,30 @@
 import { BaseNode } from "./base.js";
 import { IMagickImage } from "@imagemagick/magick-wasm";
-import { INodeDefinition, ToInput } from "@tokens-studio/graph-engine";
+import {
+  INodeDefinition,
+  ToInput,
+  ToOutput,
+} from "@tokens-studio/graph-engine";
+import { Image } from "../schemas/types.js";
 import { ImageSchema } from "../schemas/index.js";
 export class FlopNode extends BaseNode {
   static title = "Flip Horizontal";
   static type = "studio.tokens.image.flop";
 
   declare inputs: ToInput<{
-    image: ImageData;
+    image: Image;
+  }>;
+
+  declare outputs: ToOutput<{
+    image: Image;
   }>;
 
   constructor(props: INodeDefinition) {
     super(props);
-    this.addInput("image", {
+    this.dataflow.addInput("image", {
       type: ImageSchema,
     });
-    this.addOutput("image", {
+    this.dataflow.addOutput("image", {
       type: ImageSchema,
     });
   }
diff --git a/packages/nodes-image/src/nodes/gaussianBlur.ts b/packages/nodes-image/src/nodes/gaussianBlur.ts
index 5a61ccccb..bab4f0f19 100644
--- a/packages/nodes-image/src/nodes/gaussianBlur.ts
+++ b/packages/nodes-image/src/nodes/gaussianBlur.ts
@@ -24,18 +24,18 @@ export class GaussianBlurNode extends BaseNode {
 
   constructor(props: INodeDefinition) {
     super(props);
-    this.addInput("image", {
+    this.dataflow.addInput("image", {
       type: ImageSchema,
     });
-    this.addInput("sigma", {
+    this.dataflow.addInput("sigma", {
       type: NumberSchema,
     });
 
-    this.addInput("radius", {
+    this.dataflow.addInput("radius", {
       type: NumberSchema,
     });
 
-    this.addOutput("image", {
+    this.dataflow.addOutput("image", {
       type: ImageSchema,
     });
   }
diff --git a/packages/nodes-image/src/nodes/grayscale.ts b/packages/nodes-image/src/nodes/grayscale.ts
index 24058b53f..e84621639 100644
--- a/packages/nodes-image/src/nodes/grayscale.ts
+++ b/packages/nodes-image/src/nodes/grayscale.ts
@@ -21,11 +21,11 @@ export class GrayscaleNode extends BaseNode {
 
   constructor(props: INodeDefinition) {
     super(props);
-    this.addInput("image", {
+    this.dataflow.addInput("image", {
       type: ImageSchema,
     });
 
-    this.addOutput("image", {
+    this.dataflow.addOutput("image", {
       type: ImageSchema,
     });
   }
diff --git a/packages/nodes-image/src/nodes/load.ts b/packages/nodes-image/src/nodes/load.ts
index a3830730f..32f3639fc 100644
--- a/packages/nodes-image/src/nodes/load.ts
+++ b/packages/nodes-image/src/nodes/load.ts
@@ -47,11 +47,11 @@ export class FetchNode extends BaseNode {
   static description = "Loads an image externally";
   constructor(props: INodeDefinition) {
     super(props);
-    this.addInput("url", {
+    this.dataflow.addInput("url", {
       type: StringSchema,
     });
 
-    this.addOutput("image", {
+    this.dataflow.addOutput("image", {
       type: ImageSchema,
     });
   }
diff --git a/packages/nodes-image/src/nodes/morphology.ts b/packages/nodes-image/src/nodes/morphology.ts
index 306d64576..cec820f04 100644
--- a/packages/nodes-image/src/nodes/morphology.ts
+++ b/packages/nodes-image/src/nodes/morphology.ts
@@ -89,17 +89,17 @@ export class Morphology extends BaseNode {
 
   constructor(props: INodeDefinition) {
     super(props);
-    this.addInput("image", {
+    this.dataflow.addInput("image", {
       type: ImageSchema,
     });
-    this.addInput("method", {
+    this.dataflow.addInput("method", {
       type: {
         ...StringSchema,
         enum: Object.keys(morphologyMethod),
         default: "Convolve",
       },
     });
-    this.addInput("kernel", {
+    this.dataflow.addInput("kernel", {
       type: {
         ...StringSchema,
         enum: Object.keys(Kernel),
@@ -107,7 +107,7 @@ export class Morphology extends BaseNode {
       },
     });
 
-    this.addOutput("image", {
+    this.dataflow.addOutput("image", {
       type: ImageSchema,
     });
   }
diff --git a/packages/nodes-image/src/nodes/negate.ts b/packages/nodes-image/src/nodes/negate.ts
index 2d6712e92..37df4646d 100644
--- a/packages/nodes-image/src/nodes/negate.ts
+++ b/packages/nodes-image/src/nodes/negate.ts
@@ -21,11 +21,11 @@ export class NegateNode extends BaseNode {
 
   constructor(props: INodeDefinition) {
     super(props);
-    this.addInput("image", {
+    this.dataflow.addInput("image", {
       type: ImageSchema,
     });
 
-    this.addOutput("image", {
+    this.dataflow.addOutput("image", {
       type: ImageSchema,
     });
   }
diff --git a/packages/nodes-image/src/nodes/oilpaint.ts b/packages/nodes-image/src/nodes/oilpaint.ts
index 24a7fb415..48d07f6df 100644
--- a/packages/nodes-image/src/nodes/oilpaint.ts
+++ b/packages/nodes-image/src/nodes/oilpaint.ts
@@ -23,15 +23,15 @@ export class Oilpaint extends BaseNode {
 
   constructor(props: INodeDefinition) {
     super(props);
-    this.addInput("image", {
+    this.dataflow.addInput("image", {
       type: ImageSchema,
     });
 
-    this.addInput("radius", {
+    this.dataflow.addInput("radius", {
       type: NumberSchema,
     });
 
-    this.addOutput("image", {
+    this.dataflow.addOutput("image", {
       type: ImageSchema,
     });
   }
diff --git a/packages/nodes-image/src/nodes/preview.ts b/packages/nodes-image/src/nodes/preview.ts
index 9b811c35e..ca706640e 100644
--- a/packages/nodes-image/src/nodes/preview.ts
+++ b/packages/nodes-image/src/nodes/preview.ts
@@ -14,7 +14,7 @@ export class PreviewNode extends BaseNode {
   static description = "Applies sepia effect to an image.";
   constructor(props: INodeDefinition) {
     super(props);
-    this.addInput("image", {
+    this.dataflow.addInput("image", {
       type: ImageSchema,
     });
   }
diff --git a/packages/nodes-image/src/nodes/properties.ts b/packages/nodes-image/src/nodes/properties.ts
index 2c1ac337b..5d3788e51 100644
--- a/packages/nodes-image/src/nodes/properties.ts
+++ b/packages/nodes-image/src/nodes/properties.ts
@@ -31,29 +31,29 @@ export class ImageProperties extends BaseNode {
 
   constructor(props: INodeDefinition) {
     super(props);
-    this.addInput("image", {
+    this.dataflow.addInput("image", {
       type: ImageSchema,
     });
 
-    this.addOutput("width", {
+    this.dataflow.addOutput("width", {
       type: NumberSchema,
     });
-    this.addOutput("height", {
+    this.dataflow.addOutput("height", {
       type: NumberSchema,
     });
-    this.addOutput("channelCount", {
+    this.dataflow.addOutput("channelCount", {
       type: NumberSchema,
     });
-    this.addOutput("format", {
+    this.dataflow.addOutput("format", {
       type: StringSchema,
     });
-    this.addOutput("gamma", {
+    this.dataflow.addOutput("gamma", {
       type: NumberSchema,
     });
-    this.addOutput("hasAlpha", {
+    this.dataflow.addOutput("hasAlpha", {
       type: BooleanSchema,
     });
-    this.addOutput("quality", {
+    this.dataflow.addOutput("quality", {
       type: NumberSchema,
     });
   }
diff --git a/packages/nodes-image/src/nodes/resize.ts b/packages/nodes-image/src/nodes/resize.ts
index 9eb5d938d..2d793f00f 100644
--- a/packages/nodes-image/src/nodes/resize.ts
+++ b/packages/nodes-image/src/nodes/resize.ts
@@ -26,19 +26,19 @@ export class ResizeNode extends BaseNode {
 
   constructor(props: INodeDefinition) {
     super(props);
-    this.addInput("image", {
+    this.dataflow.addInput("image", {
       type: ImageSchema,
     });
-    this.addInput("width", {
+    this.dataflow.addInput("width", {
       type: NumberSchema,
     });
-    this.addInput("height", {
+    this.dataflow.addInput("height", {
       type: NumberSchema,
     });
-    this.addInput("asPercent", {
+    this.dataflow.addInput("asPercent", {
       type: BooleanSchema,
     });
-    this.addOutput("image", {
+    this.dataflow.addOutput("image", {
       type: ImageSchema,
     });
   }
diff --git a/packages/nodes-image/src/nodes/rotate.ts b/packages/nodes-image/src/nodes/rotate.ts
index 0746a0694..c209197f4 100644
--- a/packages/nodes-image/src/nodes/rotate.ts
+++ b/packages/nodes-image/src/nodes/rotate.ts
@@ -4,7 +4,9 @@ import {
   INodeDefinition,
   NumberSchema,
   ToInput,
+  ToOutput,
 } from "@tokens-studio/graph-engine";
+import { Image } from "src/schemas/types.js";
 import { ImageSchema } from "../schemas/index.js";
 
 export class RotateNode extends BaseNode {
@@ -15,15 +17,20 @@ export class RotateNode extends BaseNode {
     image: ImageData;
     degrees: number;
   }>;
+
+  declare outputs: ToOutput<{
+    image: Image;
+  }>;
+
   constructor(props: INodeDefinition) {
     super(props);
-    this.addInput("image", {
+    this.dataflow.addInput("image", {
       type: ImageSchema,
     });
-    this.addInput("degrees", {
+    this.dataflow.addInput("degrees", {
       type: NumberSchema,
     });
-    this.addOutput("image", {
+    this.dataflow.addOutput("image", {
       type: ImageSchema,
     });
   }
diff --git a/packages/nodes-image/src/nodes/seperate.ts b/packages/nodes-image/src/nodes/seperate.ts
index 100351423..55582c890 100644
--- a/packages/nodes-image/src/nodes/seperate.ts
+++ b/packages/nodes-image/src/nodes/seperate.ts
@@ -4,7 +4,9 @@ import {
   INodeDefinition,
   StringSchema,
   ToInput,
+  ToOutput,
 } from "@tokens-studio/graph-engine";
+import { Image } from "../schemas/types.js";
 import { ImageSchema } from "../schemas/index.js";
 
 const ChannelLookup = {
@@ -20,17 +22,22 @@ export class SeperateNode extends BaseNode {
   static type = "studio.tokens.image.seperate";
 
   declare inputs: ToInput<{
-    image: ImageData;
+    image: Image;
     channel: keyof typeof ChannelLookup;
+    channel: keyof typeof ChannelLookup;
+  }>;
+
+  declare outputs: ToOutput<{
+    image: Image;
   }>;
 
   constructor(props: INodeDefinition) {
     super(props);
-    this.addInput("image", {
+    this.dataflow.addInput("image", {
       type: ImageSchema,
     });
 
-    this.addInput("channel", {
+    this.dataflow.addInput("channel", {
       type: {
         ...StringSchema,
         enum: Object.keys(ChannelLookup),
@@ -38,7 +45,7 @@ export class SeperateNode extends BaseNode {
       },
     });
 
-    this.addOutput("image", {
+    this.dataflow.addOutput("image", {
       type: ImageSchema,
     });
   }
diff --git a/packages/nodes-image/src/nodes/sepia.ts b/packages/nodes-image/src/nodes/sepia.ts
index 7181598bf..9f0dad106 100644
--- a/packages/nodes-image/src/nodes/sepia.ts
+++ b/packages/nodes-image/src/nodes/sepia.ts
@@ -22,11 +22,11 @@ export class SepiaNode extends BaseNode {
   static description = "Applies sepia effect to an image.";
   constructor(props: INodeDefinition) {
     super(props);
-    this.addInput("image", {
+    this.dataflow.addInput("image", {
       type: ImageSchema,
     });
 
-    this.addOutput("image", {
+    this.dataflow.addOutput("image", {
       type: ImageSchema,
     });
   }
diff --git a/packages/nodes-image/src/nodes/sharpen.ts b/packages/nodes-image/src/nodes/sharpen.ts
index 684c6892a..d989490c1 100644
--- a/packages/nodes-image/src/nodes/sharpen.ts
+++ b/packages/nodes-image/src/nodes/sharpen.ts
@@ -24,18 +24,18 @@ export class Sharpen extends BaseNode {
 
   constructor(props: INodeDefinition) {
     super(props);
-    this.addInput("image", {
+    this.dataflow.addInput("image", {
       type: ImageSchema,
     });
-    this.addInput("sigma", {
+    this.dataflow.addInput("sigma", {
       type: NumberSchema,
     });
 
-    this.addInput("radius", {
+    this.dataflow.addInput("radius", {
       type: NumberSchema,
     });
 
-    this.addOutput("image", {
+    this.dataflow.addOutput("image", {
       type: ImageSchema,
     });
   }
diff --git a/packages/nodes-image/src/nodes/solarize.ts b/packages/nodes-image/src/nodes/solarize.ts
index cffa40d9c..7ca85c9d6 100644
--- a/packages/nodes-image/src/nodes/solarize.ts
+++ b/packages/nodes-image/src/nodes/solarize.ts
@@ -1,6 +1,11 @@
 import { BaseNode } from "./base.js";
 import { IMagickImage } from "@imagemagick/magick-wasm";
-import { INodeDefinition, ToInput } from "@tokens-studio/graph-engine";
+import {
+  INodeDefinition,
+  ToInput,
+  ToOutput,
+} from "@tokens-studio/graph-engine";
+import { Image } from "../schemas/types.js";
 import { ImageSchema } from "../schemas/index.js";
 
 export class SolarizeNode extends BaseNode {
@@ -8,15 +13,18 @@ export class SolarizeNode extends BaseNode {
   static type = "studio.tokens.image.solarize";
 
   declare inputs: ToInput<{
-    image: ImageData;
+    image: Image;
+  }>;
+  declare outputs: ToOutput<{
+    image: Image;
   }>;
 
   constructor(props: INodeDefinition) {
     super(props);
-    this.addInput("image", {
+    this.dataflow.addInput("image", {
       type: ImageSchema,
     });
-    this.addOutput("image", {
+    this.dataflow.addOutput("image", {
       type: ImageSchema,
     });
   }
diff --git a/packages/nodes-image/src/nodes/vignette.ts b/packages/nodes-image/src/nodes/vignette.ts
index 438de3f3e..efaff0b91 100644
--- a/packages/nodes-image/src/nodes/vignette.ts
+++ b/packages/nodes-image/src/nodes/vignette.ts
@@ -4,7 +4,9 @@ import {
   INodeDefinition,
   NumberSchema,
   ToInput,
+  ToOutput,
 } from "@tokens-studio/graph-engine";
+import { Image } from "../schemas/types.js";
 import { ImageSchema } from "../schemas/index.js";
 
 export class VignetteNode extends BaseNode {
@@ -12,30 +14,35 @@ export class VignetteNode extends BaseNode {
   static type = "studio.tokens.image.vignette";
 
   declare inputs: ToInput<{
-    image: ImageData;
+    image: Image;
     radius: number;
     sigma: number;
     x: number;
     y: number;
   }>;
+
+  declare outputs: ToOutput<{
+    image: Image;
+  }>;
   constructor(props: INodeDefinition) {
     super(props);
-    this.addInput("image", {
+    const df = this.dataflow;
+    df.addInput("image", {
       type: ImageSchema,
     });
-    this.addInput("radius", {
+    df.addInput("radius", {
       type: NumberSchema,
     });
-    this.addInput("sigma", {
+    df.addInput("sigma", {
       type: NumberSchema,
     });
-    this.addInput("x", {
+    df.addInput("x", {
       type: NumberSchema,
     });
-    this.addInput("y", {
+    df.addInput("y", {
       type: NumberSchema,
     });
-    this.addOutput("image", {
+    df.addOutput("image", {
       type: ImageSchema,
     });
   }
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 2ebed840e..30de601bd 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -88,7 +88,6 @@
     "sanitize.css": "13.0.0",
     "sass": "1.62.1",
     "swagger-ui-react": "5.17.14",
-    "uuid": "9.0.0",
     "wasm-import": "0.3.0",
     "ws": "8.17.0",
     "zod": "3.23.8"
@@ -105,4 +104,4 @@
     "@welldone-software/why-did-you-render": "^7.0.1",
     "typescript": "^5.4.5"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/vscode-example-workspace/capabilities/.gitkeep b/packages/vscode-example-workspace/capabilities/.gitkeep
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/vscode-example-workspace/editor/contexts/.gitkeep b/packages/vscode-example-workspace/editor/contexts/.gitkeep
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/vscode-example-workspace/editor/controls/.gitkeep b/packages/vscode-example-workspace/editor/controls/.gitkeep
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/vscode-example-workspace/editor/icons/.gitkeep b/packages/vscode-example-workspace/editor/icons/.gitkeep
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/vscode-example-workspace/editor/nodes/.gitkeep b/packages/vscode-example-workspace/editor/nodes/.gitkeep
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/vscode-example-workspace/graphs/test/description.md b/packages/vscode-example-workspace/graphs/test/description.md
new file mode 100644
index 000000000..629318b4e
--- /dev/null
+++ b/packages/vscode-example-workspace/graphs/test/description.md
@@ -0,0 +1 @@
+# My Awesome node
diff --git a/packages/vscode-example-workspace/graphs/test/graph.metadata.json b/packages/vscode-example-workspace/graphs/test/graph.metadata.json
deleted file mode 100644
index d62245e1d..000000000
--- a/packages/vscode-example-workspace/graphs/test/graph.metadata.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "capabilities": [
-    {
-      "name": "web-audio",
-      "version": "0.0.0"
-    },
-    {
-      "name": "fs",
-      "version": "0.0.0"
-    }
-  ],
-  "ui": {
-    "viewport": {
-      "x": -39.44401416206222,
-      "y": -106.86520579770138,
-      "zoom": 0.6138991546274897
-    },
-    "viewports": [null, null, null, null, null, null, null, null, null]
-  },
-  "output": {
-    "path": "./output.json"
-  }
-}
diff --git a/packages/vscode-example-workspace/graphs/test/metadata.yaml b/packages/vscode-example-workspace/graphs/test/metadata.yaml
new file mode 100644
index 000000000..a01ceb22e
--- /dev/null
+++ b/packages/vscode-example-workspace/graphs/test/metadata.yaml
@@ -0,0 +1,25 @@
+version: 1.0.0 
+title: My awesome graph
+summary: A cool graph I made
+tags: []
+context: 
+  - name: dataflow
+# Required capabilities to run this graph
+capabilities:
+  - name: File system
+    version: 0.0.0
+ui: 
+  viewport:
+    x: -39.44401416206222,
+    y: -106.86520579770138,
+    zoom: 0.6138991546274897 
+  nodes:
+    sdfsdf2323:
+      portOrder: []
+      visible: false
+      position: 
+        x: 343
+        y: 123
+
+output:
+  path: "./output.json"
diff --git a/packages/vscode-example-workspace/graphs/test/screenshot.png b/packages/vscode-example-workspace/graphs/test/screenshot.png
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/vscode-example-workspace/metadata.json b/packages/vscode-example-workspace/metadata.json
deleted file mode 100644
index 39982701d..000000000
--- a/packages/vscode-example-workspace/metadata.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  "editor": {
-    "version": "4.0.0",
-    "layout": "full",
-    "options": {
-      "showInlineTypes": true,
-      "showInlineValues": true,
-      "useDelayedInteraction": true,
-      "clickToConnect": true,
-      "showExecutionTime": true,
-      "showMinimap": true,
-      "enableContextMenus": true,
-      "edgeType": "bezier",
-      "layoutType": "dagre"
-    }
-  },
-  "logs": {
-    "output": "./output.log"
-  }
-}
diff --git a/packages/vscode-example-workspace/metadata.yaml b/packages/vscode-example-workspace/metadata.yaml
new file mode 100644
index 000000000..e6f24f047
--- /dev/null
+++ b/packages/vscode-example-workspace/metadata.yaml
@@ -0,0 +1,17 @@
+# These options are global for all files in the workspace
+editor:
+  version: 4.0.0
+  layout: full
+  options:
+    showInlineTypes: true
+    showInlineValues: true
+    useDelayedInteraction: true
+    clickToConnect: true
+    showExecutionTime: true
+    showMinimap: true
+    enableContextMenus: true
+    edgeType: "bezier"
+    layoutType: "dagre"
+logs:
+  output: "./output.log"
+
diff --git a/packages/vscode-example-workspace/nodes/example/description.md b/packages/vscode-example-workspace/nodes/example/description.md
new file mode 100644
index 000000000..629318b4e
--- /dev/null
+++ b/packages/vscode-example-workspace/nodes/example/description.md
@@ -0,0 +1 @@
+# My Awesome node
diff --git a/packages/vscode-example-workspace/nodes/example/index.ts b/packages/vscode-example-workspace/nodes/example/index.ts
index f75b91d66..307de5888 100644
--- a/packages/vscode-example-workspace/nodes/example/index.ts
+++ b/packages/vscode-example-workspace/nodes/example/index.ts
@@ -1,14 +1,12 @@
-import { Node, NumberSchema } from "@tokens-studio/graph-engine";
+import { DataflowNode, NumberSchema } from "@tokens-studio/graph-engine";
 import type {
   INodeDefinition,
   ToInput,
   ToOutput,
 } from "@tokens-studio/graph-engine";
 
-export default class NodeDefinition extends Node {
-  static title = "Add";
+export default class NodeDefinition extends DataflowNode {
   static type = "com.my.add";
-  static description = "Add node allows you to add two numbers.";
   declare inputs: ToInput<{
     a: number;
     b: number;
@@ -18,13 +16,13 @@ export default class NodeDefinition extends Node {
   }>;
   constructor(props: INodeDefinition) {
     super(props);
-    this.addInput("a", {
+    this.dataflow.addInput("a", {
       type: NumberSchema,
     });
-    this.addInput("b", {
+    this.dataflow.addInput("b", {
       type: NumberSchema,
     });
-    this.addOutput("value", {
+    this.dataflow.addOutput("value", {
       type: NumberSchema,
     });
   }
diff --git a/packages/vscode-example-workspace/nodes/example/metadata.yaml b/packages/vscode-example-workspace/nodes/example/metadata.yaml
new file mode 100644
index 000000000..78f726181
--- /dev/null
+++ b/packages/vscode-example-workspace/nodes/example/metadata.yaml
@@ -0,0 +1,19 @@
+title: Add
+summary: Adds 2 numbers together
+changelog: []
+repository:
+  type: git
+  url: "https://github.com/tokens-studio/graph-engine"
+licence: MIT
+author:
+  name: SorsOps
+inputs:
+  a:
+    title : First number
+    description: The first number to add
+    visible: false
+    # These are editor only annotations that can be used to help detect the correct controls
+    annotations: {}
+    # The json schema that identifies this input
+    type: {}
+outputs:
\ No newline at end of file
diff --git a/packages/vscode-example-workspace/nodes/example/screenshot.png b/packages/vscode-example-workspace/nodes/example/screenshot.png
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/vscode-example-workspace/user.json b/packages/vscode-example-workspace/user.json
deleted file mode 100644
index d544e70b5..000000000
--- a/packages/vscode-example-workspace/user.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "theme": "default",
-  "currentGraph": "test"
-}
diff --git a/packages/vscode-example-workspace/user.yaml b/packages/vscode-example-workspace/user.yaml
new file mode 100644
index 000000000..3ce17babd
--- /dev/null
+++ b/packages/vscode-example-workspace/user.yaml
@@ -0,0 +1,3 @@
+# These are personal settings that can overwrite those in the root metadata.yaml
+theme: default
+currentGraph: "test"
diff --git a/packages/vscode-extension/package.json b/packages/vscode-extension/package.json
index 0b9b9cbe4..07e4c5f1c 100644
--- a/packages/vscode-extension/package.json
+++ b/packages/vscode-extension/package.json
@@ -18,6 +18,16 @@
   "icon": "media/logo.png",
   "activationEvents": [],
   "main": "./dist/extension.js",
+  "capabilities": {
+    "virtualWorkspaces": {
+      "supported": false,
+      "description": "Using ESLint is not possible in virtual workspaces."
+    },
+    "untrustedWorkspaces": {
+      "supported": false,
+      "description": "The extension requires workspace trust because it loads configuration files and code from the workspace and executes it."
+    }
+  },
   "contributes": {
     "menus": {
       "explorer/context": [
@@ -28,6 +38,12 @@
         }
       ]
     },
+    "jsonValidation": [
+      {
+        "fileMatch": ".tsgraphrc",
+        "url": "https://schemas.tokens.studio/tsgraphrc.json"
+      }
+    ],
     "languages": [
       {
         "id": "tsgraph",
@@ -122,4 +138,4 @@
     "typescript": "^5.4.5",
     "vite": "^5.2.10"
   }
-}
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index ecc662c83..8744eeb99 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -204,29 +204,29 @@
     formdata-node "^4.3.2"
     node-fetch "^2.6.7"
 
-"@auth/core@0.34.1":
-  version "0.34.1"
-  resolved "https://registry.yarnpkg.com/@auth/core/-/core-0.34.1.tgz#0d4a2b92f71a743d3eeea0434782efccb37311b8"
-  integrity sha512-tuYU2VIbI8rFbkSwP710LmybB2FXJsPN7j3sjRVfN9SXVQBK2ej6LdewQaofpBGp4Mk+cC2UeiGNH0or4tgaeA==
+"@auth/core@0.32.0":
+  version "0.32.0"
+  resolved "https://registry.yarnpkg.com/@auth/core/-/core-0.32.0.tgz#2bc9ba7c52fba798ed46706bbd30d4d5c7021d75"
+  integrity sha512-3+ssTScBd+1fd0/fscAyQN1tSygXzuhysuVVzB942ggU4mdfiTbv36P0ccVnExKWYJKvu3E2r3/zxXCCAmTOrg==
   dependencies:
     "@panva/hkdf" "^1.1.1"
     "@types/cookie" "0.6.0"
     cookie "0.6.0"
     jose "^5.1.3"
-    oauth4webapi "^2.10.4"
+    oauth4webapi "^2.9.0"
     preact "10.11.3"
     preact-render-to-string "5.2.3"
 
-"@auth/core@0.37.2":
-  version "0.37.2"
-  resolved "https://registry.yarnpkg.com/@auth/core/-/core-0.37.2.tgz#0db8a94a076846bd88eb7f9273618513e2285cb2"
-  integrity sha512-kUvzyvkcd6h1vpeMAojK2y7+PAV5H+0Cc9+ZlKYDFhDY31AlvsB+GW5vNO4qE3Y07KeQgvNO9U0QUx/fN62kBw==
+"@auth/core@0.34.1":
+  version "0.34.1"
+  resolved "https://registry.yarnpkg.com/@auth/core/-/core-0.34.1.tgz#0d4a2b92f71a743d3eeea0434782efccb37311b8"
+  integrity sha512-tuYU2VIbI8rFbkSwP710LmybB2FXJsPN7j3sjRVfN9SXVQBK2ej6LdewQaofpBGp4Mk+cC2UeiGNH0or4tgaeA==
   dependencies:
-    "@panva/hkdf" "^1.2.1"
+    "@panva/hkdf" "^1.1.1"
     "@types/cookie" "0.6.0"
-    cookie "0.7.1"
-    jose "^5.9.3"
-    oauth4webapi "^3.0.0"
+    cookie "0.6.0"
+    jose "^5.1.3"
+    oauth4webapi "^2.10.4"
     preact "10.11.3"
     preact-render-to-string "5.2.3"
 
@@ -257,6 +257,32 @@
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.24.7.tgz#d23bbea508c3883ba8251fb4164982c36ea577ed"
   integrity sha512-qJzAIcv03PyaWqxRgO4mSU3lihncDT296vnyuE2O8uA4w3UHWI4S3hgeZd1L8W1Bft40w9JxJ2b412iDUFFRhw==
 
+"@babel/compat-data@^7.24.8":
+  version "7.25.0"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.25.0.tgz#6b226a5da3a686db3c30519750e071dce292ad95"
+  integrity sha512-P4fwKI2mjEb3ZU5cnMJzvRsRKGBUcs8jvxIoRmr6ufAY9Xk2Bz7JubRTTivkw55c7WQJfTECeqYVa+HZ0FzREg==
+
+"@babel/core@^7.1.0", "@babel/core@^7.12.3", "@babel/core@^7.7.5":
+  version "7.24.9"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.24.9.tgz#dc07c9d307162c97fa9484ea997ade65841c7c82"
+  integrity sha512-5e3FI4Q3M3Pbr21+5xJwCv6ZT6KmGkI0vw3Tozy5ODAQFTIWe37iT8Cr7Ice2Ntb+M3iSKCEWMB1MBgKrW3whg==
+  dependencies:
+    "@ampproject/remapping" "^2.2.0"
+    "@babel/code-frame" "^7.24.7"
+    "@babel/generator" "^7.24.9"
+    "@babel/helper-compilation-targets" "^7.24.8"
+    "@babel/helper-module-transforms" "^7.24.9"
+    "@babel/helpers" "^7.24.8"
+    "@babel/parser" "^7.24.8"
+    "@babel/template" "^7.24.7"
+    "@babel/traverse" "^7.24.8"
+    "@babel/types" "^7.24.9"
+    convert-source-map "^2.0.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.2.3"
+    semver "^6.3.1"
+
 "@babel/core@^7.18.9", "@babel/core@^7.21.3", "@babel/core@^7.23.0", "@babel/core@^7.23.3", "@babel/core@^7.24.4":
   version "7.24.7"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.24.7.tgz#b676450141e0b52a3d43bc91da86aa608f950ac4"
@@ -288,6 +314,16 @@
     "@jridgewell/trace-mapping" "^0.3.25"
     jsesc "^2.5.1"
 
+"@babel/generator@^7.24.9", "@babel/generator@^7.25.0":
+  version "7.25.0"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.25.0.tgz#f858ddfa984350bc3d3b7f125073c9af6988f18e"
+  integrity sha512-3LEEcj3PVW8pW2R1SR1M89g/qrYk/m/mB/tLqn7dn4sbBUQyTqnlod+II2U4dqiGtUmkcnAmkMDralTFZttRiw==
+  dependencies:
+    "@babel/types" "^7.25.0"
+    "@jridgewell/gen-mapping" "^0.3.5"
+    "@jridgewell/trace-mapping" "^0.3.25"
+    jsesc "^2.5.1"
+
 "@babel/helper-annotate-as-pure@^7.24.7":
   version "7.24.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.24.7.tgz#5373c7bc8366b12a033b4be1ac13a206c6656aab"
@@ -314,6 +350,17 @@
     lru-cache "^5.1.1"
     semver "^6.3.1"
 
+"@babel/helper-compilation-targets@^7.24.8":
+  version "7.24.8"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.24.8.tgz#b607c3161cd9d1744977d4f97139572fe778c271"
+  integrity sha512-oU+UoqCHdp+nWVDkpldqIQL/i/bvAv53tRqLG/s+cOXxe66zOYLU7ar/Xs3LdmBihrUMEUhwu6dMZwbNOYDwvw==
+  dependencies:
+    "@babel/compat-data" "^7.24.8"
+    "@babel/helper-validator-option" "^7.24.8"
+    browserslist "^4.23.1"
+    lru-cache "^5.1.1"
+    semver "^6.3.1"
+
 "@babel/helper-create-class-features-plugin@^7.24.7":
   version "7.24.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.24.7.tgz#2eaed36b3a1c11c53bdf80d53838b293c52f5b3b"
@@ -398,6 +445,16 @@
     "@babel/helper-split-export-declaration" "^7.24.7"
     "@babel/helper-validator-identifier" "^7.24.7"
 
+"@babel/helper-module-transforms@^7.24.9":
+  version "7.25.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.25.0.tgz#3ffc23c473a2769a7e40d3274495bd559fdd2ecc"
+  integrity sha512-bIkOa2ZJYn7FHnepzr5iX9Kmz8FjIz4UKzJ9zhX3dnYuVW0xul9RuR3skBfoLu+FPTQw90EHW9rJsSZhyLQ3fQ==
+  dependencies:
+    "@babel/helper-module-imports" "^7.24.7"
+    "@babel/helper-simple-access" "^7.24.7"
+    "@babel/helper-validator-identifier" "^7.24.7"
+    "@babel/traverse" "^7.25.0"
+
 "@babel/helper-optimise-call-expression@^7.24.7":
   version "7.24.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.24.7.tgz#8b0a0456c92f6b323d27cfd00d1d664e76692a0f"
@@ -456,6 +513,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.24.7.tgz#4d2d0f14820ede3b9807ea5fc36dfc8cd7da07f2"
   integrity sha512-7MbVt6xrwFQbunH2DNQsAP5sTGxfqQtErvBIvIMi6EQnbgUOuVYanvREcmFrOPhoXBrTtjhhP+lW+o5UfK+tDg==
 
+"@babel/helper-string-parser@^7.24.8":
+  version "7.24.8"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz#5b3329c9a58803d5df425e5785865881a81ca48d"
+  integrity sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==
+
 "@babel/helper-validator-identifier@^7.24.7":
   version "7.24.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz#75b889cfaf9e35c2aaf42cf0d72c8e91719251db"
@@ -466,6 +528,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.24.7.tgz#24c3bb77c7a425d1742eec8fb433b5a1b38e62f6"
   integrity sha512-yy1/KvjhV/ZCL+SM7hBrvnZJ3ZuT9OuZgIJAGpPEToANvc3iM6iDvBnRjtElWibHU6n8/LPR/EjX9EtIEYO3pw==
 
+"@babel/helper-validator-option@^7.24.8":
+  version "7.24.8"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.24.8.tgz#3725cdeea8b480e86d34df15304806a06975e33d"
+  integrity sha512-xb8t9tD1MHLungh/AIoWYN+gVHaB9kwlu8gffXGSt3FFEIT7RjS+xWbc2vUD1UTZdIpKj/ab3rdqJ7ufngyi2Q==
+
 "@babel/helper-wrap-function@^7.24.7":
   version "7.24.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.24.7.tgz#52d893af7e42edca7c6d2c6764549826336aae1f"
@@ -484,6 +551,14 @@
     "@babel/template" "^7.24.7"
     "@babel/types" "^7.24.7"
 
+"@babel/helpers@^7.24.8":
+  version "7.25.0"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.25.0.tgz#e69beb7841cb93a6505531ede34f34e6a073650a"
+  integrity sha512-MjgLZ42aCm0oGjJj8CtSM3DB8NOOf8h2l7DCTePJs29u+v7yO/RBX9nShlKMgFnRks/Q4tBAe7Hxnov9VkGwLw==
+  dependencies:
+    "@babel/template" "^7.25.0"
+    "@babel/types" "^7.25.0"
+
 "@babel/highlight@^7.24.7":
   version "7.24.7"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.24.7.tgz#a05ab1df134b286558aae0ed41e6c5f731bf409d"
@@ -499,6 +574,11 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.24.7.tgz#9a5226f92f0c5c8ead550b750f5608e766c8ce85"
   integrity sha512-9uUYRm6OqQrCqQdG1iCBwBPZgN8ciDBro2nIOFaiRz1/BCxaI7CNvQbDHvsArAC7Tw9Hda/B3U+6ui9u4HWXPw==
 
+"@babel/parser@^7.14.7", "@babel/parser@^7.24.8", "@babel/parser@^7.25.0":
+  version "7.25.0"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.25.0.tgz#9fdc9237504d797b6e7b8f66e78ea7f570d256ad"
+  integrity sha512-CzdIU9jdP0dg7HdyB+bHvDJGagUv+qtzZt5rYCWwW6tITNqV9odjp6Qu41gkG0ca5UfdDUWrKkiAnHHdGRnOrA==
+
 "@babel/plugin-bugfix-firefox-class-in-computed-class-key@^7.24.7":
   version "7.24.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-firefox-class-in-computed-class-key/-/plugin-bugfix-firefox-class-in-computed-class-key-7.24.7.tgz#fd059fd27b184ea2b4c7e646868a9a381bbc3055"
@@ -543,7 +623,14 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-class-properties@^7.12.13":
+"@babel/plugin-syntax-bigint@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-bigint/-/plugin-syntax-bigint-7.8.3.tgz#4c9a6f669f5d0cdf1b90a1671e9a146be5300cea"
+  integrity sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.0"
+
+"@babel/plugin-syntax-class-properties@^7.12.13", "@babel/plugin-syntax-class-properties@^7.8.3":
   version "7.12.13"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz#b5c987274c4a3a82b89714796931a6b53544ae10"
   integrity sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==
@@ -592,7 +679,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.24.7"
 
-"@babel/plugin-syntax-import-meta@^7.10.4":
+"@babel/plugin-syntax-import-meta@^7.10.4", "@babel/plugin-syntax-import-meta@^7.8.3":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz#ee601348c370fa334d2207be158777496521fd51"
   integrity sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==
@@ -613,7 +700,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.24.7"
 
-"@babel/plugin-syntax-logical-assignment-operators@^7.10.4":
+"@babel/plugin-syntax-logical-assignment-operators@^7.10.4", "@babel/plugin-syntax-logical-assignment-operators@^7.8.3":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz#ca91ef46303530448b906652bac2e9fe9941f699"
   integrity sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==
@@ -627,7 +714,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-numeric-separator@^7.10.4":
+"@babel/plugin-syntax-numeric-separator@^7.10.4", "@babel/plugin-syntax-numeric-separator@^7.8.3":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz#b9b070b3e33570cd9fd07ba7fa91c0dd37b9af97"
   integrity sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==
@@ -662,7 +749,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
-"@babel/plugin-syntax-top-level-await@^7.14.5":
+"@babel/plugin-syntax-top-level-await@^7.14.5", "@babel/plugin-syntax-top-level-await@^7.8.3":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz#c1cfdadc35a646240001f06138247b741c34d94c"
   integrity sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==
@@ -1293,13 +1380,6 @@
     core-js-pure "^3.30.2"
     regenerator-runtime "^0.14.0"
 
-"@babel/runtime@^7.0.0":
-  version "7.25.6"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.6.tgz#9afc3289f7184d8d7f98b099884c26317b9264d2"
-  integrity sha512-VBj9MYyDb9tuLq7yzqjgzt6Q+IBQLrGZfdjOekyEirZPHxXWoTSGUTMrpsfi58Up73d13NfYLv8HT9vmznjzhQ==
-  dependencies:
-    regenerator-runtime "^0.14.0"
-
 "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.1", "@babel/runtime@^7.10.3", "@babel/runtime@^7.11.1", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.16.7", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.0", "@babel/runtime@^7.18.3", "@babel/runtime@^7.2.0", "@babel/runtime@^7.20.1", "@babel/runtime@^7.20.6", "@babel/runtime@^7.20.7", "@babel/runtime@^7.22.6", "@babel/runtime@^7.23.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.24.7"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.7.tgz#f4f0d5530e8dbdf59b3451b9b3e594b6ba082e12"
@@ -1323,6 +1403,28 @@
     "@babel/parser" "^7.24.7"
     "@babel/types" "^7.24.7"
 
+"@babel/template@^7.25.0", "@babel/template@^7.3.3":
+  version "7.25.0"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.25.0.tgz#e733dc3134b4fede528c15bc95e89cb98c52592a"
+  integrity sha512-aOOgh1/5XzKvg1jvVz7AVrx2piJ2XBi227DHmbY6y+bM9H2FlN+IfecYu4Xl0cNiiVejlsCri89LUsbj8vJD9Q==
+  dependencies:
+    "@babel/code-frame" "^7.24.7"
+    "@babel/parser" "^7.25.0"
+    "@babel/types" "^7.25.0"
+
+"@babel/traverse@^7.1.0", "@babel/traverse@^7.24.8", "@babel/traverse@^7.25.0":
+  version "7.25.0"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.25.0.tgz#e8533c0a57ed97921d1e5b20dd3db63d3efaebf5"
+  integrity sha512-ubALThHQy4GCf6mbb+5ZRNmLLCI7bJ3f8Q6LHBSRlSKSWj5a7dSUzJBLv3VuIhFrFPgjF4IzPF567YG/HSCdZA==
+  dependencies:
+    "@babel/code-frame" "^7.24.7"
+    "@babel/generator" "^7.25.0"
+    "@babel/parser" "^7.25.0"
+    "@babel/template" "^7.25.0"
+    "@babel/types" "^7.25.0"
+    debug "^4.3.1"
+    globals "^11.1.0"
+
 "@babel/traverse@^7.18.9", "@babel/traverse@^7.22.8", "@babel/traverse@^7.24.1", "@babel/traverse@^7.24.7":
   version "7.24.7"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.24.7.tgz#de2b900163fa741721ba382163fe46a936c40cf5"
@@ -1348,6 +1450,15 @@
     "@babel/helper-validator-identifier" "^7.24.7"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.24.9", "@babel/types@^7.25.0", "@babel/types@^7.3.3":
+  version "7.25.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.25.0.tgz#e6e3656c581f28da8452ed4f69e38008ec0ba41b"
+  integrity sha512-LcnxQSsd9aXOIgmmSpvZ/1yo46ra2ESYyqLcryaBZOghxy5qqOBjvCWP5JfkI8yl9rlxRgdLTTMCQQRcN2hdCg==
+  dependencies:
+    "@babel/helper-string-parser" "^7.24.8"
+    "@babel/helper-validator-identifier" "^7.24.7"
+    to-fast-properties "^2.0.0"
+
 "@base2/pretty-print-object@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@base2/pretty-print-object/-/pretty-print-object-1.0.1.tgz#371ba8be66d556812dc7fb169ebc3c08378f69d4"
@@ -1375,40 +1486,33 @@
   dependencies:
     deepmerge "^4.3.1"
 
-"@bundled-es-modules/glob@^10.4.2":
-  version "10.4.2"
-  resolved "https://registry.yarnpkg.com/@bundled-es-modules/glob/-/glob-10.4.2.tgz#ef8f58b5d33ec8a1d4ca739bb49c09e5d0874bb5"
-  integrity sha512-740y5ofkzydsFao5EXJrGilcIL6EFEw/cmPf2uhTw9J6G1YOhiIFjNFCHdpgEiiH5VlU3G0SARSjlFlimRRSMA==
+"@bundled-es-modules/glob@^10.3.13":
+  version "10.3.13"
+  resolved "https://registry.yarnpkg.com/@bundled-es-modules/glob/-/glob-10.3.13.tgz#162af7285f224cbeacd8112754babf80adc0b732"
+  integrity sha512-eK+st/vwMmQy0pVvHLa2nzsS+p6NkNVR34e8qfiuzpzS1he4bMU3ODl0gbyv4r9INq5x41GqvRmFr8PtNw4yRA==
   dependencies:
     buffer "^6.0.3"
     events "^3.3.0"
-    glob "^10.4.2"
+    glob "^10.3.10"
     patch-package "^8.0.0"
     path "^0.12.7"
-    stream "^0.0.3"
+    stream "^0.0.2"
     string_decoder "^1.3.0"
-    url "^0.11.3"
+    url "^0.11.1"
 
-"@bundled-es-modules/memfs@^4.9.4":
-  version "4.9.4"
-  resolved "https://registry.yarnpkg.com/@bundled-es-modules/memfs/-/memfs-4.9.4.tgz#9c68d1ff10f485d59d45778c930aa8d60d0095a2"
-  integrity sha512-1XyYPUaIHwEOdF19wYVLBtHJRr42Do+3ctht17cZOHwHf67vkmRNPlYDGY2kJps4RgE5+c7nEZmEzxxvb1NZWA==
+"@bundled-es-modules/memfs@^4.8.1":
+  version "4.8.1"
+  resolved "https://registry.yarnpkg.com/@bundled-es-modules/memfs/-/memfs-4.8.1.tgz#0a37f5a7050eced8d03d3af81f44579548437fa6"
+  integrity sha512-9BodQuihWm3XJGKYuV/vXckK8Tkf9EDiT/au1NJeFUyBMe7EMYRtOqL9eLzrjqJSDJUFoGwQFHvraFHwR8cysQ==
   dependencies:
     assert "^2.0.0"
     buffer "^6.0.3"
     events "^3.3.0"
-    memfs "^4.9.3"
+    memfs "^4.8.1"
     path "^0.12.7"
-    stream "^0.0.3"
+    stream "^0.0.2"
     util "^0.12.5"
 
-"@bundled-es-modules/postcss-calc-ast-parser@^0.1.6":
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/@bundled-es-modules/postcss-calc-ast-parser/-/postcss-calc-ast-parser-0.1.6.tgz#c15f422c0300b2daba9cff6a9d07ef6c5e7cc673"
-  integrity sha512-y65TM5zF+uaxo9OeekJ3rxwTINlQvrkbZLogYvQYVoLtxm4xEiHfZ7e/MyiWbStYyWZVZkVqsaVU6F4SUK5XUA==
-  dependencies:
-    postcss-calc-ast-parser "^0.1.4"
-
 "@changesets/apply-release-plan@^6.1.3":
   version "6.1.4"
   resolved "https://registry.yarnpkg.com/@changesets/apply-release-plan/-/apply-release-plan-6.1.4.tgz#09293256090737ecd2f683842d6d732034a5e3c8"
@@ -1814,144 +1918,13 @@
     human-id "^1.0.2"
     prettier "^2.7.1"
 
-"@codemirror/autocomplete@^6.0.0", "@codemirror/autocomplete@^6.4.0":
-  version "6.18.0"
-  resolved "https://registry.yarnpkg.com/@codemirror/autocomplete/-/autocomplete-6.18.0.tgz#5f39b05daca04c95e990b70024144df47b2aa635"
-  integrity sha512-5DbOvBbY4qW5l57cjDsmmpDh3/TeK1vXfTHa+BUMrRzdWdcxKZ4U4V7vQaTtOpApNU4kLS4FQ6cINtLg245LXA==
-  dependencies:
-    "@codemirror/language" "^6.0.0"
-    "@codemirror/state" "^6.0.0"
-    "@codemirror/view" "^6.17.0"
-    "@lezer/common" "^1.0.0"
-
-"@codemirror/commands@^6.1.3":
-  version "6.6.1"
-  resolved "https://registry.yarnpkg.com/@codemirror/commands/-/commands-6.6.1.tgz#6beaf2f94df1af1e7d4a811dff4fea2ac227b49c"
-  integrity sha512-iBfKbyIoXS1FGdsKcZmnrxmbc8VcbMrSgD7AVrsnX+WyAYjmUDWvE93dt5D874qS4CCVu4O1JpbagHdXbbLiOw==
-  dependencies:
-    "@codemirror/language" "^6.0.0"
-    "@codemirror/state" "^6.4.0"
-    "@codemirror/view" "^6.27.0"
-    "@lezer/common" "^1.1.0"
-
-"@codemirror/lang-css@^6.0.0", "@codemirror/lang-css@^6.0.1":
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/@codemirror/lang-css/-/lang-css-6.3.0.tgz#607628559f2471b385c6070ec795072a55cffc0b"
-  integrity sha512-CyR4rUNG9OYcXDZwMPvJdtb6PHbBDKUc/6Na2BIwZ6dKab1JQqKa4di+RNRY9Myn7JB81vayKwJeQ7jEdmNVDA==
-  dependencies:
-    "@codemirror/autocomplete" "^6.0.0"
-    "@codemirror/language" "^6.0.0"
-    "@codemirror/state" "^6.0.0"
-    "@lezer/common" "^1.0.2"
-    "@lezer/css" "^1.1.7"
-
-"@codemirror/lang-html@^6.4.0":
-  version "6.4.9"
-  resolved "https://registry.yarnpkg.com/@codemirror/lang-html/-/lang-html-6.4.9.tgz#d586f2cc9c341391ae07d1d7c545990dfa069727"
-  integrity sha512-aQv37pIMSlueybId/2PVSP6NPnmurFDVmZwzc7jszd2KAF8qd4VBbvNYPXWQq90WIARjsdVkPbw29pszmHws3Q==
-  dependencies:
-    "@codemirror/autocomplete" "^6.0.0"
-    "@codemirror/lang-css" "^6.0.0"
-    "@codemirror/lang-javascript" "^6.0.0"
-    "@codemirror/language" "^6.4.0"
-    "@codemirror/state" "^6.0.0"
-    "@codemirror/view" "^6.17.0"
-    "@lezer/common" "^1.0.0"
-    "@lezer/css" "^1.1.0"
-    "@lezer/html" "^1.3.0"
-
-"@codemirror/lang-javascript@^6.0.0", "@codemirror/lang-javascript@^6.1.2":
-  version "6.2.2"
-  resolved "https://registry.yarnpkg.com/@codemirror/lang-javascript/-/lang-javascript-6.2.2.tgz#7141090b22994bef85bcc5608a3bc1257f2db2ad"
-  integrity sha512-VGQfY+FCc285AhWuwjYxQyUQcYurWlxdKYT4bqwr3Twnd5wP5WSeu52t4tvvuWmljT4EmgEgZCqSieokhtY8hg==
-  dependencies:
-    "@codemirror/autocomplete" "^6.0.0"
-    "@codemirror/language" "^6.6.0"
-    "@codemirror/lint" "^6.0.0"
-    "@codemirror/state" "^6.0.0"
-    "@codemirror/view" "^6.17.0"
-    "@lezer/common" "^1.0.0"
-    "@lezer/javascript" "^1.0.0"
-
-"@codemirror/language@^6.0.0", "@codemirror/language@^6.3.2", "@codemirror/language@^6.4.0", "@codemirror/language@^6.6.0":
-  version "6.10.2"
-  resolved "https://registry.yarnpkg.com/@codemirror/language/-/language-6.10.2.tgz#4056dc219619627ffe995832eeb09cea6060be61"
-  integrity sha512-kgbTYTo0Au6dCSc/TFy7fK3fpJmgHDv1sG1KNQKJXVi+xBTEeBPY/M30YXiU6mMXeH+YIDLsbrT4ZwNRdtF+SA==
-  dependencies:
-    "@codemirror/state" "^6.0.0"
-    "@codemirror/view" "^6.23.0"
-    "@lezer/common" "^1.1.0"
-    "@lezer/highlight" "^1.0.0"
-    "@lezer/lr" "^1.0.0"
-    style-mod "^4.0.0"
-
-"@codemirror/lint@^6.0.0":
-  version "6.8.1"
-  resolved "https://registry.yarnpkg.com/@codemirror/lint/-/lint-6.8.1.tgz#6427848815baaf68c08e98c7673b804d3d8c0e7f"
-  integrity sha512-IZ0Y7S4/bpaunwggW2jYqwLuHj0QtESf5xcROewY6+lDNwZ/NzvR4t+vpYgg9m7V8UXLPYqG+lu3DF470E5Oxg==
-  dependencies:
-    "@codemirror/state" "^6.0.0"
-    "@codemirror/view" "^6.0.0"
-    crelt "^1.0.5"
-
-"@codemirror/state@^6.0.0", "@codemirror/state@^6.2.0", "@codemirror/state@^6.4.0":
-  version "6.4.1"
-  resolved "https://registry.yarnpkg.com/@codemirror/state/-/state-6.4.1.tgz#da57143695c056d9a3c38705ed34136e2b68171b"
-  integrity sha512-QkEyUiLhsJoZkbumGZlswmAhA7CBU02Wrz7zvH4SrcifbsqwlXShVXg65f3v/ts57W3dqyamEriMhij1Z3Zz4A==
-
-"@codemirror/view@^6.0.0", "@codemirror/view@^6.17.0", "@codemirror/view@^6.23.0", "@codemirror/view@^6.27.0", "@codemirror/view@^6.7.1":
-  version "6.33.0"
-  resolved "https://registry.yarnpkg.com/@codemirror/view/-/view-6.33.0.tgz#51e270410fc3af92a6e38798e80ebf8add7dc3ec"
-  integrity sha512-AroaR3BvnjRW8fiZBalAaK+ZzB5usGgI014YKElYZvQdNH5ZIidHlO+cyf/2rWzyBFRkvG6VhiXeAEbC53P2YQ==
-  dependencies:
-    "@codemirror/state" "^6.4.0"
-    style-mod "^4.1.0"
-    w3c-keyname "^2.2.4"
-
-"@codesandbox/nodebox@0.1.8":
-  version "0.1.8"
-  resolved "https://registry.yarnpkg.com/@codesandbox/nodebox/-/nodebox-0.1.8.tgz#2dc701005cedefac386f17a69a4c9a4f38c2325d"
-  integrity sha512-2VRS6JDSk+M+pg56GA6CryyUSGPjBEe8Pnae0QL3jJF1mJZJVMDKr93gJRtBbLkfZN6LD/DwMtf+2L0bpWrjqg==
-  dependencies:
-    outvariant "^1.4.0"
-    strict-event-emitter "^0.4.3"
-
-"@codesandbox/sandpack-client@^2.19.0":
-  version "2.19.0"
-  resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-client/-/sandpack-client-2.19.0.tgz#6f2ca59a3b1d48789767437dda1d5017159b2148"
-  integrity sha512-a1D1/kJgyJRtqwiv2keX484RtgArOIBCj9NX/AqXWdVrHAn+yJtxP1RCqW0T0sfpYray/j2XD2WQn/6kz7VKMA==
+"@cnakazawa/watch@^1.0.3":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.4.tgz#f864ae85004d0fcab6f50be9141c4da368d1656a"
+  integrity sha512-v9kIhKwjeZThiWrLmj0y17CWoyddASLj9O2yvbZkbvw/N3rWOYy9zkV66ursAoVr0mV15bL8g0c4QZUE6cdDoQ==
   dependencies:
-    "@codesandbox/nodebox" "0.1.8"
-    buffer "^6.0.3"
-    dequal "^2.0.2"
-    mime-db "^1.52.0"
-    outvariant "1.4.0"
-    static-browser-server "1.0.3"
-
-"@codesandbox/sandpack-react@2.19.3":
-  version "2.19.3"
-  resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-react/-/sandpack-react-2.19.3.tgz#341e3dd8e96ab0af7885ea6b66e2eca0594cf64f"
-  integrity sha512-S/uyFfjlu2pyTTDoobm25RvxnfrRwp8fuXQWqrcxaCI7NkZ/aTAnIL+RC9Tf/AJJMMwcoTPKCi1g0f7zvnL+nA==
-  dependencies:
-    "@codemirror/autocomplete" "^6.4.0"
-    "@codemirror/commands" "^6.1.3"
-    "@codemirror/lang-css" "^6.0.1"
-    "@codemirror/lang-html" "^6.4.0"
-    "@codemirror/lang-javascript" "^6.1.2"
-    "@codemirror/language" "^6.3.2"
-    "@codemirror/state" "^6.2.0"
-    "@codemirror/view" "^6.7.1"
-    "@codesandbox/sandpack-client" "^2.19.0"
-    "@lezer/highlight" "^1.1.3"
-    "@react-hook/intersection-observer" "^3.1.1"
-    "@stitches/core" "^1.2.6"
-    anser "^2.1.1"
-    clean-set "^1.1.2"
-    dequal "^2.0.2"
-    escape-carriage "^1.3.1"
-    lz-string "^1.4.4"
-    react-devtools-inline "4.4.0"
-    react-is "^17.0.2"
+    exec-sh "^0.3.2"
+    minimist "^1.2.0"
 
 "@colors/colors@1.5.0":
   version "1.5.0"
@@ -1965,310 +1938,6 @@
   dependencies:
     "@jridgewell/trace-mapping" "0.3.9"
 
-"@csstools/cascade-layer-name-parser@^2.0.1":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@csstools/cascade-layer-name-parser/-/cascade-layer-name-parser-2.0.1.tgz#0369d481ca95bdc9278bc517a68922810b14e8df"
-  integrity sha512-G9ZYN5+yr/E6xYSiy1BwOEFP5p88ZtWo8sL4NztKBkRRAwRkzVGa70M+D+fYHugMID5jkLeNt5X9jYd5EaVuyg==
-
-"@csstools/color-helpers@^5.0.1":
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/@csstools/color-helpers/-/color-helpers-5.0.1.tgz#829f1c76f5800b79c51c709e2f36821b728e0e10"
-  integrity sha512-MKtmkA0BX87PKaO1NFRTFH+UnkgnmySQOvNxJubsadusqPEC2aJ9MOQiMceZJJ6oitUl/i0L6u0M1IrmAOmgBA==
-
-"@csstools/css-calc@^2.0.1":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@csstools/css-calc/-/css-calc-2.0.1.tgz#1675297b19f0933c729fdd7f4f5279b855ae724f"
-  integrity sha512-e59V+sNp6e5m+9WnTUydA1DQO70WuKUdseflRpWmXxocF/h5wWGIxUjxfvLtajcmwstH0vm6l0reKMzcyI757Q==
-
-"@csstools/css-color-parser@^3.0.2":
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/@csstools/css-color-parser/-/css-color-parser-3.0.2.tgz#710abb97142d58bcefc3a5e032a55a246895351c"
-  integrity sha512-mNg7A6HnNjlm0we/pDS9dUafOuBxcanN0TBhEGeIk6zZincuk0+mAbnBqfVs29NlvWHZ8diwTG6g5FeU8246sA==
-  dependencies:
-    "@csstools/color-helpers" "^5.0.1"
-    "@csstools/css-calc" "^2.0.1"
-
-"@csstools/css-parser-algorithms@^3.0.1":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@csstools/css-parser-algorithms/-/css-parser-algorithms-3.0.1.tgz#f14ade63bae5f6025ac85c7d03fe47a7ca0e58af"
-  integrity sha512-lSquqZCHxDfuTg/Sk2hiS0mcSFCEBuj49JfzPHJogDBT0mGCyY5A1AQzBWngitrp7i1/HAZpIgzF/VjhOEIJIg==
-
-"@csstools/css-tokenizer@^3.0.1":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@csstools/css-tokenizer/-/css-tokenizer-3.0.1.tgz#9dd9b10084f3011290f96789598091e5bcb3c29a"
-  integrity sha512-UBqaiu7kU0lfvaP982/o3khfXccVlHPWp0/vwwiIgDF0GmqqqxoiXC/6FCjlS9u92f7CoEz6nXKQnrn1kIAkOw==
-
-"@csstools/media-query-list-parser@^3.0.1":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@csstools/media-query-list-parser/-/media-query-list-parser-3.0.1.tgz#9474e08e6d7767cf68c56bf1581b59d203360cb0"
-  integrity sha512-HNo8gGD02kHmcbX6PvCoUuOQvn4szyB9ca63vZHKX5A81QytgDG4oxG4IaEfHTlEZSZ6MjPEMWIVU+zF2PZcgw==
-
-"@csstools/postcss-cascade-layers@^5.0.0":
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/@csstools/postcss-cascade-layers/-/postcss-cascade-layers-5.0.0.tgz#ad9985c2d273554552a546f6b1584d03d8886a8d"
-  integrity sha512-h+VunB3KXaoWTWEPBcdVk8Kz1eZ/CtDD+HXgKw5JLdbsViLEQdKUtFYH73VIQigdodng8s5DCrrwNQY7pnuWBA==
-  dependencies:
-    "@csstools/selector-specificity" "^4.0.0"
-    postcss-selector-parser "^6.1.0"
-
-"@csstools/postcss-color-function@^4.0.2":
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/@csstools/postcss-color-function/-/postcss-color-function-4.0.2.tgz#0b22c912ea97afb20bbffa6a166a2dc5ced9a66f"
-  integrity sha512-q/W3RXh66SM7WqxW3/KU6koL8nOgqyB/wrcU3+ThXnNtXY2+k8UgdE301ISJpMt6PDyYgC7eMaIBo535RvFIgw==
-  dependencies:
-    "@csstools/css-color-parser" "^3.0.2"
-    "@csstools/css-parser-algorithms" "^3.0.1"
-    "@csstools/css-tokenizer" "^3.0.1"
-    "@csstools/postcss-progressive-custom-properties" "^4.0.0"
-    "@csstools/utilities" "^2.0.0"
-
-"@csstools/postcss-color-mix-function@^3.0.2":
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/@csstools/postcss-color-mix-function/-/postcss-color-mix-function-3.0.2.tgz#e91a58a91c27fcb4fbdebae7616d47ed6bafdcfa"
-  integrity sha512-zG9PHNzZVCRk6eprm+T/ybrnuiwLdO+RR7+GCtNut+NZJGtPJj6bfPOEX23aOlMslLcRAlN6QOpxH3tovn+WpA==
-  dependencies:
-    "@csstools/css-color-parser" "^3.0.2"
-    "@csstools/css-parser-algorithms" "^3.0.1"
-    "@csstools/css-tokenizer" "^3.0.1"
-    "@csstools/postcss-progressive-custom-properties" "^4.0.0"
-    "@csstools/utilities" "^2.0.0"
-
-"@csstools/postcss-content-alt-text@^2.0.1":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@csstools/postcss-content-alt-text/-/postcss-content-alt-text-2.0.1.tgz#53950a51b40385d596a1f6d173ee6927b3d7d3f9"
-  integrity sha512-TWjjewVZqdkjavsi8a2THuXgkhUum1k/m4QJpZpzOv72q6WnaoQZGSj5t5uCs7ymJr0H3qj6JcXMwMApSWUOGQ==
-  dependencies:
-    "@csstools/css-parser-algorithms" "^3.0.1"
-    "@csstools/css-tokenizer" "^3.0.1"
-    "@csstools/postcss-progressive-custom-properties" "^4.0.0"
-    "@csstools/utilities" "^2.0.0"
-
-"@csstools/postcss-exponential-functions@^2.0.1":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@csstools/postcss-exponential-functions/-/postcss-exponential-functions-2.0.1.tgz#ad504c8d648b21d4eb263efaea4f40949c05d3ce"
-  integrity sha512-A/MG8es3ylFzZ30oYIQUyJcMOfTfCs0dqqBMzeuzaPRlx4q/72WG+BbKe/pL9BUNIWsM0Q8jn3e3la8enjHJJA==
-  dependencies:
-    "@csstools/css-calc" "^2.0.1"
-    "@csstools/css-parser-algorithms" "^3.0.1"
-    "@csstools/css-tokenizer" "^3.0.1"
-
-"@csstools/postcss-font-format-keywords@^4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@csstools/postcss-font-format-keywords/-/postcss-font-format-keywords-4.0.0.tgz#6730836eb0153ff4f3840416cc2322f129c086e6"
-  integrity sha512-usBzw9aCRDvchpok6C+4TXC57btc4bJtmKQWOHQxOVKen1ZfVqBUuCZ/wuqdX5GHsD0NRSr9XTP+5ID1ZZQBXw==
-  dependencies:
-    "@csstools/utilities" "^2.0.0"
-    postcss-value-parser "^4.2.0"
-
-"@csstools/postcss-gamut-mapping@^2.0.2":
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/@csstools/postcss-gamut-mapping/-/postcss-gamut-mapping-2.0.2.tgz#9500b33612407a93d4328c5b0bb85cd7c0477be0"
-  integrity sha512-/1ur3ca9RWg/KnbLlxaDswyjLSGoaHNDruAzrVhkn5axgd7LOH6JHCBRhrKDafdMw9bf4MQrYFoaLfHAPekLFg==
-  dependencies:
-    "@csstools/css-color-parser" "^3.0.2"
-    "@csstools/css-parser-algorithms" "^3.0.1"
-    "@csstools/css-tokenizer" "^3.0.1"
-
-"@csstools/postcss-gradients-interpolation-method@^5.0.2":
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/@csstools/postcss-gradients-interpolation-method/-/postcss-gradients-interpolation-method-5.0.2.tgz#19208385a7b665d7dff3419cf1830ce9f140e20a"
-  integrity sha512-qRpvA4sduAfiV9yZG4OM7q/h2Qhr3lg+GrHe9NZwuzWnfSDLGh+Dh4Ea6fQ+1++jdKXW/Cb4/vHRp0ssQYra4w==
-  dependencies:
-    "@csstools/css-color-parser" "^3.0.2"
-    "@csstools/css-parser-algorithms" "^3.0.1"
-    "@csstools/css-tokenizer" "^3.0.1"
-    "@csstools/postcss-progressive-custom-properties" "^4.0.0"
-    "@csstools/utilities" "^2.0.0"
-
-"@csstools/postcss-hwb-function@^4.0.2":
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/@csstools/postcss-hwb-function/-/postcss-hwb-function-4.0.2.tgz#ebafc6d1f0e60bd88e5c246b4feee6824fc3b3b1"
-  integrity sha512-RUBVCyJE1hTsf9vGp3zrALeMollkAlHRFKm+T36y67nLfOOf+6GNQsdTGFAyLrY65skcm8ddC26Jp1n9ZIauEA==
-  dependencies:
-    "@csstools/css-color-parser" "^3.0.2"
-    "@csstools/css-parser-algorithms" "^3.0.1"
-    "@csstools/css-tokenizer" "^3.0.1"
-    "@csstools/postcss-progressive-custom-properties" "^4.0.0"
-    "@csstools/utilities" "^2.0.0"
-
-"@csstools/postcss-ic-unit@^4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@csstools/postcss-ic-unit/-/postcss-ic-unit-4.0.0.tgz#b60ec06500717c337447c39ae7fe7952eeb9d48f"
-  integrity sha512-9QT5TDGgx7wD3EEMN3BSUG6ckb6Eh5gSPT5kZoVtUuAonfPmLDJyPhqR4ntPpMYhUKAMVKAg3I/AgzqHMSeLhA==
-  dependencies:
-    "@csstools/postcss-progressive-custom-properties" "^4.0.0"
-    "@csstools/utilities" "^2.0.0"
-    postcss-value-parser "^4.2.0"
-
-"@csstools/postcss-initial@^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@csstools/postcss-initial/-/postcss-initial-2.0.0.tgz#a86f5fc59ab9f16f1422dade4c58bd941af5df22"
-  integrity sha512-dv2lNUKR+JV+OOhZm9paWzYBXOCi+rJPqJ2cJuhh9xd8USVrd0cBEPczla81HNOyThMQWeCcdln3gZkQV2kYxA==
-
-"@csstools/postcss-is-pseudo-class@^5.0.0":
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/@csstools/postcss-is-pseudo-class/-/postcss-is-pseudo-class-5.0.0.tgz#61a4c74e55eec63c06349cfe8d6f2bab82b6ef69"
-  integrity sha512-E/CjrT03BL06WmrjupnrT0VUBTvxJdoW1hRVeXFa9qatWtvcLLw0j8hP372G4A9PpSGEMXi3/AoHzPf7DNryCQ==
-  dependencies:
-    "@csstools/selector-specificity" "^4.0.0"
-    postcss-selector-parser "^6.1.0"
-
-"@csstools/postcss-light-dark-function@^2.0.4":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@csstools/postcss-light-dark-function/-/postcss-light-dark-function-2.0.4.tgz#90c55ec03f3fb4b69a3156372bbf6d64ab33cd4c"
-  integrity sha512-yHUt5DZ61Irvp72notmAl3Zt4Me50EWToWNocazyIFTVYFwwo/EucmV3hWi9zJehu3rOSvMclL7DzvRDfbak/A==
-  dependencies:
-    "@csstools/css-parser-algorithms" "^3.0.1"
-    "@csstools/css-tokenizer" "^3.0.1"
-    "@csstools/postcss-progressive-custom-properties" "^4.0.0"
-    "@csstools/utilities" "^2.0.0"
-
-"@csstools/postcss-logical-float-and-clear@^3.0.0":
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/@csstools/postcss-logical-float-and-clear/-/postcss-logical-float-and-clear-3.0.0.tgz#62617564182cf86ab5d4e7485433ad91e4c58571"
-  integrity sha512-SEmaHMszwakI2rqKRJgE+8rpotFfne1ZS6bZqBoQIicFyV+xT1UF42eORPxJkVJVrH9C0ctUgwMSn3BLOIZldQ==
-
-"@csstools/postcss-logical-overflow@^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@csstools/postcss-logical-overflow/-/postcss-logical-overflow-2.0.0.tgz#c6de7c5f04e3d4233731a847f6c62819bcbcfa1d"
-  integrity sha512-spzR1MInxPuXKEX2csMamshR4LRaSZ3UXVaRGjeQxl70ySxOhMpP2252RAFsg8QyyBXBzuVOOdx1+bVO5bPIzA==
-
-"@csstools/postcss-logical-overscroll-behavior@^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@csstools/postcss-logical-overscroll-behavior/-/postcss-logical-overscroll-behavior-2.0.0.tgz#43c03eaecdf34055ef53bfab691db6dc97a53d37"
-  integrity sha512-e/webMjoGOSYfqLunyzByZj5KKe5oyVg/YSbie99VEaSDE2kimFm0q1f6t/6Jo+VVCQ/jbe2Xy+uX+C4xzWs4w==
-
-"@csstools/postcss-logical-resize@^3.0.0":
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/@csstools/postcss-logical-resize/-/postcss-logical-resize-3.0.0.tgz#4df0eeb1a61d7bd85395e56a5cce350b5dbfdca6"
-  integrity sha512-DFbHQOFW/+I+MY4Ycd/QN6Dg4Hcbb50elIJCfnwkRTCX05G11SwViI5BbBlg9iHRl4ytB7pmY5ieAFk3ws7yyg==
-  dependencies:
-    postcss-value-parser "^4.2.0"
-
-"@csstools/postcss-logical-viewport-units@^3.0.1":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@csstools/postcss-logical-viewport-units/-/postcss-logical-viewport-units-3.0.1.tgz#bae5470a86cc72fe6a7f1b2a9a1386de752646d6"
-  integrity sha512-JsfaoTiBqIuRE+CYL4ZpYKOqJ965GyiMH4b8UrY0Z7i5GfMiHZrK7xtTB29piuyKQzrW+Z8w3PAExhwND9cuAQ==
-  dependencies:
-    "@csstools/css-tokenizer" "^3.0.1"
-    "@csstools/utilities" "^2.0.0"
-
-"@csstools/postcss-media-minmax@^2.0.1":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@csstools/postcss-media-minmax/-/postcss-media-minmax-2.0.1.tgz#23fc4006232693310b42f224e7e27d6d20cfd3a3"
-  integrity sha512-EMa3IgUip+F/MwH4r2KfIA9ym9hQkT2PpR9MOukdomfGGCFuw9V3n/iIOBKziN1qfeddsYoOvtYOKQcHU2yIjg==
-  dependencies:
-    "@csstools/css-calc" "^2.0.1"
-    "@csstools/css-parser-algorithms" "^3.0.1"
-    "@csstools/css-tokenizer" "^3.0.1"
-    "@csstools/media-query-list-parser" "^3.0.1"
-
-"@csstools/postcss-media-queries-aspect-ratio-number-values@^3.0.1":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@csstools/postcss-media-queries-aspect-ratio-number-values/-/postcss-media-queries-aspect-ratio-number-values-3.0.1.tgz#84dcfbbd268f9b777b5269bea3b98e67dff38496"
-  integrity sha512-JTzMQz//INahTALkvXnC5lC2fJKzwb5PY443T2zaM9hAzM7nzHMLIlEfFgdtBahVIBtBSalMefdxNr99LGW1lQ==
-  dependencies:
-    "@csstools/css-parser-algorithms" "^3.0.1"
-    "@csstools/css-tokenizer" "^3.0.1"
-    "@csstools/media-query-list-parser" "^3.0.1"
-
-"@csstools/postcss-nested-calc@^4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@csstools/postcss-nested-calc/-/postcss-nested-calc-4.0.0.tgz#754e10edc6958d664c11cde917f44ba144141c62"
-  integrity sha512-jMYDdqrQQxE7k9+KjstC3NbsmC063n1FTPLCgCRS2/qHUbHM0mNy9pIn4QIiQGs9I/Bg98vMqw7mJXBxa0N88A==
-  dependencies:
-    "@csstools/utilities" "^2.0.0"
-    postcss-value-parser "^4.2.0"
-
-"@csstools/postcss-normalize-display-values@^4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@csstools/postcss-normalize-display-values/-/postcss-normalize-display-values-4.0.0.tgz#ecdde2daf4e192e5da0c6fd933b6d8aff32f2a36"
-  integrity sha512-HlEoG0IDRoHXzXnkV4in47dzsxdsjdz6+j7MLjaACABX2NfvjFS6XVAnpaDyGesz9gK2SC7MbNwdCHusObKJ9Q==
-  dependencies:
-    postcss-value-parser "^4.2.0"
-
-"@csstools/postcss-oklab-function@^4.0.2":
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/@csstools/postcss-oklab-function/-/postcss-oklab-function-4.0.2.tgz#3d36974fbb7c3a589d52756e4eb029eaa29e4735"
-  integrity sha512-2iSK/T77PHMeorakBAk/WLxSodfIJ/lmi6nxEkuruXfhGH7fByZim4Fw6ZJf4B73SVieRSH2ep8zvYkA2ZfRtA==
-  dependencies:
-    "@csstools/css-color-parser" "^3.0.2"
-    "@csstools/css-parser-algorithms" "^3.0.1"
-    "@csstools/css-tokenizer" "^3.0.1"
-    "@csstools/postcss-progressive-custom-properties" "^4.0.0"
-    "@csstools/utilities" "^2.0.0"
-
-"@csstools/postcss-progressive-custom-properties@^4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@csstools/postcss-progressive-custom-properties/-/postcss-progressive-custom-properties-4.0.0.tgz#ecdb85bcdb1852d73970a214a376684a91f82bdc"
-  integrity sha512-XQPtROaQjomnvLUSy/bALTR5VCtTVUFwYs1SblvYgLSeTo2a/bMNwUwo2piXw5rTv/FEYiy5yPSXBqg9OKUx7Q==
-  dependencies:
-    postcss-value-parser "^4.2.0"
-
-"@csstools/postcss-relative-color-syntax@^3.0.2":
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/@csstools/postcss-relative-color-syntax/-/postcss-relative-color-syntax-3.0.2.tgz#a26cb580c41d01c0de76f4c70c38b3375d050602"
-  integrity sha512-aBpuUdpJBswNGfw6lOkhown2cZ0YXrMjASye56nkoRpgRe9yDF4BM1fvEuakrCDiaeoUzVaI4SF6+344BflXfQ==
-  dependencies:
-    "@csstools/css-color-parser" "^3.0.2"
-    "@csstools/css-parser-algorithms" "^3.0.1"
-    "@csstools/css-tokenizer" "^3.0.1"
-    "@csstools/postcss-progressive-custom-properties" "^4.0.0"
-    "@csstools/utilities" "^2.0.0"
-
-"@csstools/postcss-scope-pseudo-class@^4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@csstools/postcss-scope-pseudo-class/-/postcss-scope-pseudo-class-4.0.0.tgz#5b975e9e4f96ea8ae6cad4b9ab1be0baa49c61c9"
-  integrity sha512-+ZUOBtVMDcmHZcZqsP/jcNRriEILfWQflTI3tCTA+/RheXAg57VkFGyPDAilpQSqlCpxWLWG8VUFKFtZJPwuOg==
-  dependencies:
-    postcss-selector-parser "^6.1.0"
-
-"@csstools/postcss-stepped-value-functions@^4.0.1":
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/@csstools/postcss-stepped-value-functions/-/postcss-stepped-value-functions-4.0.1.tgz#f4f41565ac69aa98ce40da54db3ce7de5cc36502"
-  integrity sha512-dk3KqVcIEYzy9Mvx8amoBbk123BWgd5DfjXDiPrEqxGma37PG7m/MoMmHQhuVHIjvPDHoJwyIZi2yy7j0RA5fw==
-  dependencies:
-    "@csstools/css-calc" "^2.0.1"
-    "@csstools/css-parser-algorithms" "^3.0.1"
-    "@csstools/css-tokenizer" "^3.0.1"
-
-"@csstools/postcss-text-decoration-shorthand@^4.0.1":
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/@csstools/postcss-text-decoration-shorthand/-/postcss-text-decoration-shorthand-4.0.1.tgz#251fab0939d50c6fd73bb2b830b2574188efa087"
-  integrity sha512-xPZIikbx6jyzWvhms27uugIc0I4ykH4keRvoa3rxX5K7lEhkbd54rjj/dv60qOCTisoS+3bmwJTeyV1VNBrXaw==
-  dependencies:
-    "@csstools/color-helpers" "^5.0.1"
-    postcss-value-parser "^4.2.0"
-
-"@csstools/postcss-trigonometric-functions@^4.0.1":
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/@csstools/postcss-trigonometric-functions/-/postcss-trigonometric-functions-4.0.1.tgz#dad12bcc4306a6c77f54ba62025adda902ef9106"
-  integrity sha512-QHOYuN3bzS/rcpAygFhJxJUtD8GuJEWF6f9Zm518Tq/cSMlcTgU+v0geyi5EqbmYxKMig2oKCKUSGqOj9gehkg==
-  dependencies:
-    "@csstools/css-calc" "^2.0.1"
-    "@csstools/css-parser-algorithms" "^3.0.1"
-    "@csstools/css-tokenizer" "^3.0.1"
-
-"@csstools/postcss-unset-value@^4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@csstools/postcss-unset-value/-/postcss-unset-value-4.0.0.tgz#7caa981a34196d06a737754864baf77d64de4bba"
-  integrity sha512-cBz3tOCI5Fw6NIFEwU3RiwK6mn3nKegjpJuzCndoGq3BZPkUjnsq7uQmIeMNeMbMk7YD2MfKcgCpZwX5jyXqCA==
-
-"@csstools/selector-resolve-nested@^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@csstools/selector-resolve-nested/-/selector-resolve-nested-2.0.0.tgz#826e05f6971c334a12d86e2394129d62d4f19104"
-  integrity sha512-oklSrRvOxNeeOW1yARd4WNCs/D09cQjunGZUgSq6vM8GpzFswN+8rBZyJA29YFZhOTQ6GFzxgLDNtVbt9wPZMA==
-
-"@csstools/selector-specificity@^4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-4.0.0.tgz#7dfccb9df5499e627e7bfdbb4021a06813a45dba"
-  integrity sha512-189nelqtPd8++phaHNwYovKZI0FOzH1vQEE3QhHHkNIGrg5fSs9CbYP3RvfEH5geztnIA9Jwq91wyOIwAW5JIQ==
-
-"@csstools/utilities@^2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@csstools/utilities/-/utilities-2.0.0.tgz#f7ff0fee38c9ffb5646d47b6906e0bc8868bde60"
-  integrity sha512-5VdOr0Z71u+Yp3ozOx8T11N703wIFGVRgOWbOZMKgglPJsWA54MRIoMNVMa7shUToIhx5J8vX4sOZgD2XiihiQ==
-
 "@cypress/request@^3.0.0":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@cypress/request/-/request-3.0.1.tgz#72d7d5425236a2413bd3d8bb66d02d9dc3168960"
@@ -2759,17 +2428,22 @@
     utility-types "^3.10.0"
     webpack "^5.88.1"
 
-"@emotion/is-prop-valid@^0.8.2":
-  version "0.8.8"
-  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
-  integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
+"@emotion/is-prop-valid@1.2.2":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz#d4175076679c6a26faa92b03bb786f9e52612337"
+  integrity sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==
   dependencies:
-    "@emotion/memoize" "0.7.4"
+    "@emotion/memoize" "^0.8.1"
 
-"@emotion/memoize@0.7.4":
-  version "0.7.4"
-  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
-  integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
+"@emotion/memoize@^0.8.1":
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.1.tgz#c1ddb040429c6d21d38cc945fe75c818cfb68e17"
+  integrity sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==
+
+"@emotion/unitless@0.8.1":
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.1.tgz#182b5a4704ef8ad91bde93f7a860a88fd92c79a3"
+  integrity sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==
 
 "@emotion/use-insertion-effect-with-fallbacks@^1.0.1":
   version "1.0.1"
@@ -3038,6 +2712,11 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.57.0.tgz#a5417ae8427873f1dd08b70b3574b453e67b5f7f"
   integrity sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==
 
+"@exodus/schemasafe@^1.0.0-rc.2":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@exodus/schemasafe/-/schemasafe-1.3.0.tgz#731656abe21e8e769a7f70a4d833e6312fe59b7f"
+  integrity sha512-5Aap/GaRupgNx/feGBwLLTVv8OQFfv3pq2lPRzPg9R+IOBnDgghTGW7l7EuVXOvg5cc/xSAlRW8rBrjIC3Nvqw==
+
 "@fal-works/esbuild-plugin-global-externals@^2.1.2":
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/@fal-works/esbuild-plugin-global-externals/-/esbuild-plugin-global-externals-2.1.2.tgz#c05ed35ad82df8e6ac616c68b92c2282bd083ba4"
@@ -3070,16 +2749,6 @@
   resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.2.tgz#d8bae93ac8b815b2bd7a98078cf91e2724ef11e5"
   integrity sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw==
 
-"@fontsource/geist-mono@^5.1.0":
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/@fontsource/geist-mono/-/geist-mono-5.1.0.tgz#a46a0abed1b594e7ae1f55a53a1fa17255ca5186"
-  integrity sha512-MDFgmKUdDbV357vD2bOZAro597Nd2md01GAdr3GSZteCJQdPT/UhHUBCAxl9KUiH03aMPFM9Rx7x8/EtrJmpKg==
-
-"@fontsource/geist-sans@^5.1.0":
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/@fontsource/geist-sans/-/geist-sans-5.1.0.tgz#5eacb9e8b3a264c2786314f13aa511bbd5075fbb"
-  integrity sha512-4AI/UxIcZiYgK6/cTo4R9oM4VHHLcFdHVv7m2+M42VyY16hhKJADrGe4HPjTxvolmce2IZX/jc6sFJ+GkLB64w==
-
 "@gilbarbara/deep-equal@^0.1.1":
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/@gilbarbara/deep-equal/-/deep-equal-0.1.2.tgz#1a106721368dba5e7e9fb7e9a3a6f9efbd8df36d"
@@ -3121,6 +2790,11 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz#4a2868d75d6d6963e423bcf90b7fd1be343409d3"
   integrity sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==
 
+"@iconicicons/react@^1.5.1":
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/@iconicicons/react/-/react-1.5.1.tgz#1ddb561dc51b5b65f8e8f98fdbc019327e658662"
+  integrity sha512-/Y23Y5NBBK7h/1/R8vTdHM0zwX9Yhk8L58QRhpD1Zu8heXDOz89Lqhzb8VQ1DAdYnd0vjfcGcQaUSgZQVbnlOw==
+
 "@imagemagick/magick-wasm@^0.0.29":
   version "0.0.29"
   resolved "https://registry.yarnpkg.com/@imagemagick/magick-wasm/-/magick-wasm-0.0.29.tgz#3dc1e0e69ce3b283ba9e0cba57423f7e6c8e8506"
@@ -3131,41 +2805,235 @@
   resolved "https://registry.yarnpkg.com/@interactjs/types/-/types-1.10.27.tgz#10afd71cef2498e2b5192cf0d46f937d8ceb767f"
   integrity sha512-BUdv0cvs4H5ODuwft2Xp4eL8Vmi3LcihK42z0Ft/FbVJZoRioBsxH+LlsBdK4tAie7PqlKGy+1oyOncu1nQ6eA==
 
+"@isaacs/cliui@^8.0.2":
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/@isaacs/cliui/-/cliui-8.0.2.tgz#b37667b7bc181c168782259bab42474fbf52b550"
+  integrity sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==
+  dependencies:
+    string-width "^5.1.2"
+    string-width-cjs "npm:string-width@^4.2.0"
+    strip-ansi "^7.0.1"
+    strip-ansi-cjs "npm:strip-ansi@^6.0.1"
+    wrap-ansi "^8.1.0"
+    wrap-ansi-cjs "npm:wrap-ansi@^7.0.0"
+
+"@istanbuljs/load-nyc-config@^1.0.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"
+  integrity sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==
+  dependencies:
+    camelcase "^5.3.1"
+    find-up "^4.1.0"
+    get-package-type "^0.1.0"
+    js-yaml "^3.13.1"
+    resolve-from "^5.0.0"
+
 "@istanbuljs/schema@^0.1.2", "@istanbuljs/schema@^0.1.3":
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/@istanbuljs/schema/-/schema-0.1.3.tgz#e45e384e4b8ec16bce2fd903af78450f6bf7ec98"
   integrity sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==
 
-"@jest/schemas@^29.6.3":
-  version "29.6.3"
-  resolved "https://registry.yarnpkg.com/@jest/schemas/-/schemas-29.6.3.tgz#430b5ce8a4e0044a7e3819663305a7b3091c8e03"
-  integrity sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==
+"@jest/console@^26.6.2":
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/@jest/console/-/console-26.6.2.tgz#4e04bc464014358b03ab4937805ee36a0aeb98f2"
+  integrity sha512-IY1R2i2aLsLr7Id3S6p2BA82GNWryt4oSvEXLAKc+L2zdi89dSkE8xC1C+0kpATG4JhBJREnQOH7/zmccM2B0g==
   dependencies:
-    "@sinclair/typebox" "^0.27.8"
+    "@jest/types" "^26.6.2"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    jest-message-util "^26.6.2"
+    jest-util "^26.6.2"
+    slash "^3.0.0"
 
-"@jest/types@^29.6.3":
-  version "29.6.3"
-  resolved "https://registry.yarnpkg.com/@jest/types/-/types-29.6.3.tgz#1131f8cf634e7e84c5e77bab12f052af585fba59"
-  integrity sha512-u3UPsIilWKOM3F9CXtrG8LEJmNxwoCQC/XVj4IKYXvvpx7QIi/Kg1LI5uDmDpKlac62NUtX7eLjRh+jVZcLOzw==
+"@jest/core@^26.6.3":
+  version "26.6.3"
+  resolved "https://registry.yarnpkg.com/@jest/core/-/core-26.6.3.tgz#7639fcb3833d748a4656ada54bde193051e45fad"
+  integrity sha512-xvV1kKbhfUqFVuZ8Cyo+JPpipAHHAV3kcDBftiduK8EICXmTFddryy3P7NfZt8Pv37rA9nEJBKCCkglCPt/Xjw==
   dependencies:
-    "@jest/schemas" "^29.6.3"
-    "@types/istanbul-lib-coverage" "^2.0.0"
-    "@types/istanbul-reports" "^3.0.0"
+    "@jest/console" "^26.6.2"
+    "@jest/reporters" "^26.6.2"
+    "@jest/test-result" "^26.6.2"
+    "@jest/transform" "^26.6.2"
+    "@jest/types" "^26.6.2"
     "@types/node" "*"
-    "@types/yargs" "^17.0.8"
+    ansi-escapes "^4.2.1"
     chalk "^4.0.0"
+    exit "^0.1.2"
+    graceful-fs "^4.2.4"
+    jest-changed-files "^26.6.2"
+    jest-config "^26.6.3"
+    jest-haste-map "^26.6.2"
+    jest-message-util "^26.6.2"
+    jest-regex-util "^26.0.0"
+    jest-resolve "^26.6.2"
+    jest-resolve-dependencies "^26.6.3"
+    jest-runner "^26.6.3"
+    jest-runtime "^26.6.3"
+    jest-snapshot "^26.6.2"
+    jest-util "^26.6.2"
+    jest-validate "^26.6.2"
+    jest-watcher "^26.6.2"
+    micromatch "^4.0.2"
+    p-each-series "^2.1.0"
+    rimraf "^3.0.0"
+    slash "^3.0.0"
+    strip-ansi "^6.0.0"
 
-"@joshwooding/vite-plugin-react-docgen-typescript@0.3.1":
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/@joshwooding/vite-plugin-react-docgen-typescript/-/vite-plugin-react-docgen-typescript-0.3.1.tgz#a733e7fc90c00ce694058d3af034b9f63d88cddd"
-  integrity sha512-pdoMZ9QaPnVlSM+SdU/wgg0nyD/8wQ7y90ttO2CMCyrrm7RxveYIJ5eNfjPaoMFqW41LZra7QO9j+xV4Y18Glw==
+"@jest/environment@^26.6.2":
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-26.6.2.tgz#ba364cc72e221e79cc8f0a99555bf5d7577cf92c"
+  integrity sha512-nFy+fHl28zUrRsCeMB61VDThV1pVTtlEokBRgqPrcT1JNq4yRNIyTHfyht6PqtUvY9IsuLGTrbG8kPXjSZIZwA==
   dependencies:
-    glob "^7.2.0"
-    glob-promise "^4.2.0"
-    magic-string "^0.27.0"
-    react-docgen-typescript "^2.2.2"
+    "@jest/fake-timers" "^26.6.2"
+    "@jest/types" "^26.6.2"
+    "@types/node" "*"
+    jest-mock "^26.6.2"
+
+"@jest/fake-timers@^26.6.2":
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-26.6.2.tgz#459c329bcf70cee4af4d7e3f3e67848123535aad"
+  integrity sha512-14Uleatt7jdzefLPYM3KLcnUl1ZNikaKq34enpb5XG9i81JpppDb5muZvonvKyrl7ftEHkKS5L5/eB/kxJ+bvA==
+  dependencies:
+    "@jest/types" "^26.6.2"
+    "@sinonjs/fake-timers" "^6.0.1"
+    "@types/node" "*"
+    jest-message-util "^26.6.2"
+    jest-mock "^26.6.2"
+    jest-util "^26.6.2"
+
+"@jest/globals@^26.6.2":
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/@jest/globals/-/globals-26.6.2.tgz#5b613b78a1aa2655ae908eba638cc96a20df720a"
+  integrity sha512-85Ltnm7HlB/KesBUuALwQ68YTU72w9H2xW9FjZ1eL1U3lhtefjjl5c2MiUbpXt/i6LaPRvoOFJ22yCBSfQ0JIA==
+  dependencies:
+    "@jest/environment" "^26.6.2"
+    "@jest/types" "^26.6.2"
+    expect "^26.6.2"
+
+"@jest/reporters@^26.6.2":
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-26.6.2.tgz#1f518b99637a5f18307bd3ecf9275f6882a667f6"
+  integrity sha512-h2bW53APG4HvkOnVMo8q3QXa6pcaNt1HkwVsOPMBV6LD/q9oSpxNSYZQYkAnjdMjrJ86UuYeLo+aEZClV6opnw==
+  dependencies:
+    "@bcoe/v8-coverage" "^0.2.3"
+    "@jest/console" "^26.6.2"
+    "@jest/test-result" "^26.6.2"
+    "@jest/transform" "^26.6.2"
+    "@jest/types" "^26.6.2"
+    chalk "^4.0.0"
+    collect-v8-coverage "^1.0.0"
+    exit "^0.1.2"
+    glob "^7.1.2"
+    graceful-fs "^4.2.4"
+    istanbul-lib-coverage "^3.0.0"
+    istanbul-lib-instrument "^4.0.3"
+    istanbul-lib-report "^3.0.0"
+    istanbul-lib-source-maps "^4.0.0"
+    istanbul-reports "^3.0.2"
+    jest-haste-map "^26.6.2"
+    jest-resolve "^26.6.2"
+    jest-util "^26.6.2"
+    jest-worker "^26.6.2"
+    slash "^3.0.0"
+    source-map "^0.6.0"
+    string-length "^4.0.1"
+    terminal-link "^2.0.0"
+    v8-to-istanbul "^7.0.0"
+  optionalDependencies:
+    node-notifier "^8.0.0"
+
+"@jest/schemas@^29.6.3":
+  version "29.6.3"
+  resolved "https://registry.yarnpkg.com/@jest/schemas/-/schemas-29.6.3.tgz#430b5ce8a4e0044a7e3819663305a7b3091c8e03"
+  integrity sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==
+  dependencies:
+    "@sinclair/typebox" "^0.27.8"
+
+"@jest/source-map@^26.6.2":
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-26.6.2.tgz#29af5e1e2e324cafccc936f218309f54ab69d535"
+  integrity sha512-YwYcCwAnNmOVsZ8mr3GfnzdXDAl4LaenZP5z+G0c8bzC9/dugL8zRmxZzdoTl4IaS3CryS1uWnROLPFmb6lVvA==
+  dependencies:
+    callsites "^3.0.0"
+    graceful-fs "^4.2.4"
+    source-map "^0.6.0"
+
+"@jest/test-result@^26.6.2":
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-26.6.2.tgz#55da58b62df134576cc95476efa5f7949e3f5f18"
+  integrity sha512-5O7H5c/7YlojphYNrK02LlDIV2GNPYisKwHm2QTKjNZeEzezCbwYs9swJySv2UfPMyZ0VdsmMv7jIlD/IKYQpQ==
+  dependencies:
+    "@jest/console" "^26.6.2"
+    "@jest/types" "^26.6.2"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    collect-v8-coverage "^1.0.0"
+
+"@jest/test-sequencer@^26.6.3":
+  version "26.6.3"
+  resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-26.6.3.tgz#98e8a45100863886d074205e8ffdc5a7eb582b17"
+  integrity sha512-YHlVIjP5nfEyjlrSr8t/YdNfU/1XEt7c5b4OxcXCjyRhjzLYu/rO69/WHPuYcbCWkz8kAeZVZp2N2+IOLLEPGw==
+  dependencies:
+    "@jest/test-result" "^26.6.2"
+    graceful-fs "^4.2.4"
+    jest-haste-map "^26.6.2"
+    jest-runner "^26.6.3"
+    jest-runtime "^26.6.3"
+
+"@jest/transform@^26.6.2":
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-26.6.2.tgz#5ac57c5fa1ad17b2aae83e73e45813894dcf2e4b"
+  integrity sha512-E9JjhUgNzvuQ+vVAL21vlyfy12gP0GhazGgJC4h6qUt1jSdUXGWJ1wfu/X7Sd8etSgxV4ovT1pb9v5D6QW4XgA==
+  dependencies:
+    "@babel/core" "^7.1.0"
+    "@jest/types" "^26.6.2"
+    babel-plugin-istanbul "^6.0.0"
+    chalk "^4.0.0"
+    convert-source-map "^1.4.0"
+    fast-json-stable-stringify "^2.0.0"
+    graceful-fs "^4.2.4"
+    jest-haste-map "^26.6.2"
+    jest-regex-util "^26.0.0"
+    jest-util "^26.6.2"
+    micromatch "^4.0.2"
+    pirates "^4.0.1"
+    slash "^3.0.0"
+    source-map "^0.6.1"
+    write-file-atomic "^3.0.0"
+
+"@jest/types@^26.6.2":
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-26.6.2.tgz#bef5a532030e1d88a2f5a6d933f84e97226ed48e"
+  integrity sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ==
+  dependencies:
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/istanbul-reports" "^3.0.0"
+    "@types/node" "*"
+    "@types/yargs" "^15.0.0"
+    chalk "^4.0.0"
+
+"@jest/types@^29.6.3":
+  version "29.6.3"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-29.6.3.tgz#1131f8cf634e7e84c5e77bab12f052af585fba59"
+  integrity sha512-u3UPsIilWKOM3F9CXtrG8LEJmNxwoCQC/XVj4IKYXvvpx7QIi/Kg1LI5uDmDpKlac62NUtX7eLjRh+jVZcLOzw==
+  dependencies:
+    "@jest/schemas" "^29.6.3"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/istanbul-reports" "^3.0.0"
+    "@types/node" "*"
+    "@types/yargs" "^17.0.8"
+    chalk "^4.0.0"
+
+"@joshwooding/vite-plugin-react-docgen-typescript@0.3.1":
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@joshwooding/vite-plugin-react-docgen-typescript/-/vite-plugin-react-docgen-typescript-0.3.1.tgz#a733e7fc90c00ce694058d3af034b9f63d88cddd"
+  integrity sha512-pdoMZ9QaPnVlSM+SdU/wgg0nyD/8wQ7y90ttO2CMCyrrm7RxveYIJ5eNfjPaoMFqW41LZra7QO9j+xV4Y18Glw==
+  dependencies:
+    glob "^7.2.0"
+    glob-promise "^4.2.0"
+    magic-string "^0.27.0"
+    react-docgen-typescript "^2.2.2"
 
-"@jridgewell/gen-mapping@^0.3.5":
+"@jridgewell/gen-mapping@^0.3.2", "@jridgewell/gen-mapping@^0.3.5":
   version "0.3.5"
   resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz#dcce6aff74bdf6dad1a95802b69b04a2fcb1fb36"
   integrity sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==
@@ -3233,11 +3101,6 @@
   resolved "https://registry.yarnpkg.com/@jsonjoy.com/util/-/util-1.2.0.tgz#0fe9a92de72308c566ebcebe8b5a3f01d3149df2"
   integrity sha512-4B8B+3vFsY4eo33DMKyJPlQ3sBMpPFUZK2dr3O3rXrOGKKbYG44J0XSFkDo1VOQiri5HFEhIeVvItjR2xcazmg==
 
-"@jsonjoy.com/util@^1.3.0":
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/@jsonjoy.com/util/-/util-1.5.0.tgz#6008e35b9d9d8ee27bc4bfaa70c8cbf33a537b4c"
-  integrity sha512-ojoNsrIuPI9g6o8UxhraZQSyF2ByJanAY4cTFbc8Mf2AXEF4aQRGY1dJxyJpuyav8r9FGflEt/Ff3u5Nt6YMPA==
-
 "@juggle/resize-observer@^3.3.1":
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60"
@@ -3248,52 +3111,6 @@
   resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz#4fc56c15c580b9adb7dc3c333a134e540b44bfb1"
   integrity sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==
 
-"@lezer/common@^1.0.0", "@lezer/common@^1.0.2", "@lezer/common@^1.1.0", "@lezer/common@^1.2.0":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@lezer/common/-/common-1.2.1.tgz#198b278b7869668e1bebbe687586e12a42731049"
-  integrity sha512-yemX0ZD2xS/73llMZIK6KplkjIjf2EvAHcinDi/TfJ9hS25G0388+ClHt6/3but0oOxinTcQHJLDXh6w1crzFQ==
-
-"@lezer/css@^1.1.0", "@lezer/css@^1.1.7":
-  version "1.1.8"
-  resolved "https://registry.yarnpkg.com/@lezer/css/-/css-1.1.8.tgz#11fd456dac53bc899b266778794ed4ca9576a5a4"
-  integrity sha512-7JhxupKuMBaWQKjQoLtzhGj83DdnZY9MckEOG5+/iLKNK2ZJqKc6hf6uc0HjwCX7Qlok44jBNqZhHKDhEhZYLA==
-  dependencies:
-    "@lezer/common" "^1.2.0"
-    "@lezer/highlight" "^1.0.0"
-    "@lezer/lr" "^1.0.0"
-
-"@lezer/highlight@^1.0.0", "@lezer/highlight@^1.1.3":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@lezer/highlight/-/highlight-1.2.1.tgz#596fa8f9aeb58a608be0a563e960c373cbf23f8b"
-  integrity sha512-Z5duk4RN/3zuVO7Jq0pGLJ3qynpxUVsh7IbUbGj88+uV2ApSAn6kWg2au3iJb+0Zi7kKtqffIESgNcRXWZWmSA==
-  dependencies:
-    "@lezer/common" "^1.0.0"
-
-"@lezer/html@^1.3.0":
-  version "1.3.10"
-  resolved "https://registry.yarnpkg.com/@lezer/html/-/html-1.3.10.tgz#1be9a029a6fe835c823b20a98a449a630416b2af"
-  integrity sha512-dqpT8nISx/p9Do3AchvYGV3qYc4/rKr3IBZxlHmpIKam56P47RSHkSF5f13Vu9hebS1jM0HmtJIwLbWz1VIY6w==
-  dependencies:
-    "@lezer/common" "^1.2.0"
-    "@lezer/highlight" "^1.0.0"
-    "@lezer/lr" "^1.0.0"
-
-"@lezer/javascript@^1.0.0":
-  version "1.4.17"
-  resolved "https://registry.yarnpkg.com/@lezer/javascript/-/javascript-1.4.17.tgz#8456e369f960c328b9e823342d0c72d704238c31"
-  integrity sha512-bYW4ctpyGK+JMumDApeUzuIezX01H76R1foD6LcRX224FWfyYit/HYxiPGDjXXe/wQWASjCvVGoukTH68+0HIA==
-  dependencies:
-    "@lezer/common" "^1.2.0"
-    "@lezer/highlight" "^1.1.3"
-    "@lezer/lr" "^1.3.0"
-
-"@lezer/lr@^1.0.0", "@lezer/lr@^1.3.0":
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/@lezer/lr/-/lr-1.4.2.tgz#931ea3dea8e9de84e90781001dae30dea9ff1727"
-  integrity sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA==
-  dependencies:
-    "@lezer/common" "^1.0.0"
-
 "@lit-labs/ssr-dom-shim@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.0.tgz#353ce4a76c83fadec272ea5674ede767650762fd"
@@ -3371,84 +3188,13 @@
   dependencies:
     "@types/mdx" "^2.0.0"
 
-"@minoru/react-dnd-treeview@^3.4.0":
-  version "3.4.4"
-  resolved "https://registry.yarnpkg.com/@minoru/react-dnd-treeview/-/react-dnd-treeview-3.4.4.tgz#3f9652ff02a06a7c22867310d6030e06fed2ffab"
-  integrity sha512-S5FRjQFag3cShU7rATx6UhaegYw+Uz3L/IXwBiD5snI+dW2Qm5Ey+8dKC+vpsVoHDYkgE/YKKWz+odGe1rNggA==
-  dependencies:
-    "@juggle/resize-observer" "^3.3.1"
-    dnd-multi-backend "^7.0.0-alpha.4"
-    framer-motion "^6.2.8"
-    react-dnd-html5-backend "^16.0.1"
-    react-dnd-touch-backend "^16.0.1"
-    react-use-measure "^2.1.1"
-
-"@monaco-editor/loader@^1.4.0":
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/@monaco-editor/loader/-/loader-1.4.0.tgz#f08227057331ec890fa1e903912a5b711a2ad558"
-  integrity sha512-00ioBig0x642hytVspPl7DbQyaSWRaolYie/UFNjoTdvoKPzo6xrXLhTk9ixgIKcLH5b5vDOjVNiGyY+uDCUlg==
+"@mrmlnc/readdir-enhanced@^2.2.1":
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
+  integrity sha512-bPHp6Ji8b41szTOcaP63VlnbbO5Ny6dwAATtY6JTjh5N2OLrb5Qk/Th5cRkRQhkWCt+EJsYrNB0MiL+Gpn6e3g==
   dependencies:
-    state-local "^1.0.6"
-
-"@monaco-editor/react@4.6.0":
-  version "4.6.0"
-  resolved "https://registry.yarnpkg.com/@monaco-editor/react/-/react-4.6.0.tgz#bcc68671e358a21c3814566b865a54b191e24119"
-  integrity sha512-RFkU9/i7cN2bsq/iTkurMWOEErmYcY6JiQI3Jn+WeR/FGISH8JbHERjpS9oRuSOPvDMJI0Z8nJeKkbOs9sBYQw==
-  dependencies:
-    "@monaco-editor/loader" "^1.4.0"
-
-"@motionone/animation@^10.12.0":
-  version "10.18.0"
-  resolved "https://registry.yarnpkg.com/@motionone/animation/-/animation-10.18.0.tgz#868d00b447191816d5d5cf24b1cafa144017922b"
-  integrity sha512-9z2p5GFGCm0gBsZbi8rVMOAJCtw1WqBTIPw3ozk06gDvZInBPIsQcHgYogEJ4yuHJ+akuW8g1SEIOpTOvYs8hw==
-  dependencies:
-    "@motionone/easing" "^10.18.0"
-    "@motionone/types" "^10.17.1"
-    "@motionone/utils" "^10.18.0"
-    tslib "^2.3.1"
-
-"@motionone/dom@10.12.0":
-  version "10.12.0"
-  resolved "https://registry.yarnpkg.com/@motionone/dom/-/dom-10.12.0.tgz#ae30827fd53219efca4e1150a5ff2165c28351ed"
-  integrity sha512-UdPTtLMAktHiqV0atOczNYyDd/d8Cf5fFsd1tua03PqTwwCe/6lwhLSQ8a7TbnQ5SN0gm44N1slBfj+ORIhrqw==
-  dependencies:
-    "@motionone/animation" "^10.12.0"
-    "@motionone/generators" "^10.12.0"
-    "@motionone/types" "^10.12.0"
-    "@motionone/utils" "^10.12.0"
-    hey-listen "^1.0.8"
-    tslib "^2.3.1"
-
-"@motionone/easing@^10.18.0":
-  version "10.18.0"
-  resolved "https://registry.yarnpkg.com/@motionone/easing/-/easing-10.18.0.tgz#7b82f6010dfee3a1bb0ee83abfbaff6edae0c708"
-  integrity sha512-VcjByo7XpdLS4o9T8t99JtgxkdMcNWD3yHU/n6CLEz3bkmKDRZyYQ/wmSf6daum8ZXqfUAgFeCZSpJZIMxaCzg==
-  dependencies:
-    "@motionone/utils" "^10.18.0"
-    tslib "^2.3.1"
-
-"@motionone/generators@^10.12.0":
-  version "10.18.0"
-  resolved "https://registry.yarnpkg.com/@motionone/generators/-/generators-10.18.0.tgz#fe09ab5cfa0fb9a8884097feb7eb60abeb600762"
-  integrity sha512-+qfkC2DtkDj4tHPu+AFKVfR/C30O1vYdvsGYaR13W/1cczPrrcjdvYCj0VLFuRMN+lP1xvpNZHCRNM4fBzn1jg==
-  dependencies:
-    "@motionone/types" "^10.17.1"
-    "@motionone/utils" "^10.18.0"
-    tslib "^2.3.1"
-
-"@motionone/types@^10.12.0", "@motionone/types@^10.17.1":
-  version "10.17.1"
-  resolved "https://registry.yarnpkg.com/@motionone/types/-/types-10.17.1.tgz#cf487badbbdc9da0c2cb86ffc1e5d11147c6e6fb"
-  integrity sha512-KaC4kgiODDz8hswCrS0btrVrzyU2CSQKO7Ps90ibBVSQmjkrt2teqta6/sOG59v7+dPnKMAg13jyqtMKV2yJ7A==
-
-"@motionone/utils@^10.12.0", "@motionone/utils@^10.18.0":
-  version "10.18.0"
-  resolved "https://registry.yarnpkg.com/@motionone/utils/-/utils-10.18.0.tgz#a59ff8932ed9009624bca07c56b28ef2bb2f885e"
-  integrity sha512-3XVF7sgyTSI2KWvTf6uLlBJ5iAgRgmvp3bpuOiQJvInd4nZ19ET8lX5unn30SlmRH7hXbBbH+Gxd0m0klJ3Xtw==
-  dependencies:
-    "@motionone/types" "^10.17.1"
-    hey-listen "^1.0.8"
-    tslib "^2.3.1"
+    call-me-maybe "^1.0.1"
+    glob-to-regexp "^0.3.0"
 
 "@ndelangen/get-tarball@^3.0.7":
   version "3.0.9"
@@ -3466,55 +3212,55 @@
   dependencies:
     webpack-bundle-analyzer "4.10.1"
 
-"@next/env@14.2.20":
-  version "14.2.20"
-  resolved "https://registry.yarnpkg.com/@next/env/-/env-14.2.20.tgz#0be2cc955f4eb837516e7d7382284cd5bc1d5a02"
-  integrity sha512-JfDpuOCB0UBKlEgEy/H6qcBSzHimn/YWjUHzKl1jMeUO+QVRdzmTTl8gFJaNO87c8DXmVKhFCtwxQ9acqB3+Pw==
-
-"@next/swc-darwin-arm64@14.2.20":
-  version "14.2.20"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.20.tgz#3c99d318c08362aedde5d2778eec3a50b8085d99"
-  integrity sha512-WDfq7bmROa5cIlk6ZNonNdVhKmbCv38XteVFYsxea1vDJt3SnYGgxLGMTXQNfs5OkFvAhmfKKrwe7Y0Hs+rWOg==
-
-"@next/swc-darwin-x64@14.2.20":
-  version "14.2.20"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.20.tgz#fd547fad1446a677f29c1160006fdd482bba4052"
-  integrity sha512-XIQlC+NAmJPfa2hruLvr1H1QJJeqOTDV+v7tl/jIdoFvqhoihvSNykLU/G6NMgoeo+e/H7p/VeWSOvMUHKtTIg==
-
-"@next/swc-linux-arm64-gnu@14.2.20":
-  version "14.2.20"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.20.tgz#1d6ba1929d3a11b74c0185cdeca1e38b824222ca"
-  integrity sha512-pnzBrHTPXIMm5QX3QC8XeMkpVuoAYOmyfsO4VlPn+0NrHraNuWjdhe+3xLq01xR++iCvX+uoeZmJDKcOxI201Q==
-
-"@next/swc-linux-arm64-musl@14.2.20":
-  version "14.2.20"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.20.tgz#0fe0c67b5d916f99ca76b39416557af609768f17"
-  integrity sha512-WhJJAFpi6yqmUx1momewSdcm/iRXFQS0HU2qlUGlGE/+98eu7JWLD5AAaP/tkK1mudS/rH2f9E3WCEF2iYDydQ==
-
-"@next/swc-linux-x64-gnu@14.2.20":
-  version "14.2.20"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.20.tgz#6d29fa8cdb6a9f8250c2048aaa24538f0cd0b02d"
-  integrity sha512-ao5HCbw9+iG1Kxm8XsGa3X174Ahn17mSYBQlY6VGsdsYDAbz/ZP13wSLfvlYoIDn1Ger6uYA+yt/3Y9KTIupRg==
-
-"@next/swc-linux-x64-musl@14.2.20":
-  version "14.2.20"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.20.tgz#bfc57482bc033fda8455e8aab1c3cbc44f0c4690"
-  integrity sha512-CXm/kpnltKTT7945np6Td3w7shj/92TMRPyI/VvveFe8+YE+/YOJ5hyAWK5rpx711XO1jBCgXl211TWaxOtkaA==
-
-"@next/swc-win32-arm64-msvc@14.2.20":
-  version "14.2.20"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.20.tgz#6f7783e643310510240a981776532ffe0e02af95"
-  integrity sha512-upJn2HGQgKNDbXVfIgmqT2BN8f3z/mX8ddoyi1I565FHbfowVK5pnMEwauvLvaJf4iijvuKq3kw/b6E9oIVRWA==
-
-"@next/swc-win32-ia32-msvc@14.2.20":
-  version "14.2.20"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.20.tgz#58c7720687e80a13795e22c29d5860fa142e44fc"
-  integrity sha512-igQW/JWciTGJwj3G1ipalD2V20Xfx3ywQy17IV0ciOUBbFhNfyU1DILWsTi32c8KmqgIDviUEulW/yPb2FF90w==
-
-"@next/swc-win32-x64-msvc@14.2.20":
-  version "14.2.20"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.20.tgz#689bc7beb8005b73c95d926e7edfb7f73efc78f2"
-  integrity sha512-AFmqeLW6LtxeFTuoB+MXFeM5fm5052i3MU6xD0WzJDOwku6SkZaxb1bxjBaRC8uNqTRTSPl0yMFtjNowIVI67w==
+"@next/env@14.2.3":
+  version "14.2.3"
+  resolved "https://registry.yarnpkg.com/@next/env/-/env-14.2.3.tgz#d6def29d1c763c0afb397343a15a82e7d92353a0"
+  integrity sha512-W7fd7IbkfmeeY2gXrzJYDx8D2lWKbVoTIj1o1ScPHNzvp30s1AuoEFSdr39bC5sjxJaxTtq3OTCZboNp0lNWHA==
+
+"@next/swc-darwin-arm64@14.2.3":
+  version "14.2.3"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.3.tgz#db1a05eb88c0224089b815ad10ac128ec79c2cdb"
+  integrity sha512-3pEYo/RaGqPP0YzwnlmPN2puaF2WMLM3apt5jLW2fFdXD9+pqcoTzRk+iZsf8ta7+quAe4Q6Ms0nR0SFGFdS1A==
+
+"@next/swc-darwin-x64@14.2.3":
+  version "14.2.3"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.3.tgz#a3f8af05b5f9a52ac3082e66ac29e125ab1d7b9c"
+  integrity sha512-6adp7waE6P1TYFSXpY366xwsOnEXM+y1kgRpjSRVI2CBDOcbRjsJ67Z6EgKIqWIue52d2q/Mx8g9MszARj8IEA==
+
+"@next/swc-linux-arm64-gnu@14.2.3":
+  version "14.2.3"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.3.tgz#4e63f43879285b52554bfd39e6e0cc78a9b27bbf"
+  integrity sha512-cuzCE/1G0ZSnTAHJPUT1rPgQx1w5tzSX7POXSLaS7w2nIUJUD+e25QoXD/hMfxbsT9rslEXugWypJMILBj/QsA==
+
+"@next/swc-linux-arm64-musl@14.2.3":
+  version "14.2.3"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.3.tgz#ebdaed26214448b1e6f2c3e8b3cd29bfba387990"
+  integrity sha512-0D4/oMM2Y9Ta3nGuCcQN8jjJjmDPYpHX9OJzqk42NZGJocU2MqhBq5tWkJrUQOQY9N+In9xOdymzapM09GeiZw==
+
+"@next/swc-linux-x64-gnu@14.2.3":
+  version "14.2.3"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.3.tgz#19e3bcc137c3b582a1ab867106817e5c90a20593"
+  integrity sha512-ENPiNnBNDInBLyUU5ii8PMQh+4XLr4pG51tOp6aJ9xqFQ2iRI6IH0Ds2yJkAzNV1CfyagcyzPfROMViS2wOZ9w==
+
+"@next/swc-linux-x64-musl@14.2.3":
+  version "14.2.3"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.3.tgz#794a539b98e064169cf0ff7741b2a4fb16adec7d"
+  integrity sha512-BTAbq0LnCbF5MtoM7I/9UeUu/8ZBY0i8SFjUMCbPDOLv+un67e2JgyN4pmgfXBwy/I+RHu8q+k+MCkDN6P9ViQ==
+
+"@next/swc-win32-arm64-msvc@14.2.3":
+  version "14.2.3"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.3.tgz#eda9fa0fbf1ff9113e87ac2668ee67ce9e5add5a"
+  integrity sha512-AEHIw/dhAMLNFJFJIJIyOFDzrzI5bAjI9J26gbO5xhAKHYTZ9Or04BesFPXiAYXDNdrwTP2dQceYA4dL1geu8A==
+
+"@next/swc-win32-ia32-msvc@14.2.3":
+  version "14.2.3"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.3.tgz#7c1190e3f640ab16580c6bdbd7d0e766b9920457"
+  integrity sha512-vga40n1q6aYb0CLrM+eEmisfKCR45ixQYXuBXxOOmmoV8sYST9k7E3US32FsY+CkkF7NtzdcebiFT4CHuMSyZw==
+
+"@next/swc-win32-x64-msvc@14.2.3":
+  version "14.2.3"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.3.tgz#2be4e39ee25bfbd85be78eea17c0e7751dc4323c"
+  integrity sha512-Q1/zm43RWynxrO7lW4ehciQVj+5ePBhOK+/K2P7pLFX3JaJ/IZVC69SHidrmZSOkqz7ECIOhhy7XhAFG4JYyHA==
 
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
@@ -3529,6 +3275,11 @@
   resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz#5bd262af94e9d25bd1e71b05deed44876a222e8b"
   integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
 
+"@nodelib/fs.stat@^1.1.2":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b"
+  integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==
+
 "@nodelib/fs.walk@^1.2.3", "@nodelib/fs.walk@^1.2.8":
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz#e95737e8bb6746ddedf69c556953494f196fe69a"
@@ -3537,11 +3288,6 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@open-draft/deferred-promise@^2.1.0":
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/@open-draft/deferred-promise/-/deferred-promise-2.2.0.tgz#4a822d10f6f0e316be4d67b4d4f8c9a124b073bd"
-  integrity sha512-CecwLWx3rhxVQF6V4bAgPS5t+So2sTbPgAzafKkVizyi7tlwpcFpdFqq+wqF2OwNBmqFuu6tOyouTuxgpMfzmA==
-
 "@opentelemetry/api-logs@0.50.0":
   version "0.50.0"
   resolved "https://registry.yarnpkg.com/@opentelemetry/api-logs/-/api-logs-0.50.0.tgz#d46b76daab0bc18fa92dcdabacfc106c380d19a1"
@@ -3554,7 +3300,7 @@
   resolved "https://registry.yarnpkg.com/@opentelemetry/api/-/api-1.9.0.tgz#d03eba68273dc0f7509e2a3d5cba21eae10379fe"
   integrity sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg==
 
-"@panva/hkdf@^1.1.1", "@panva/hkdf@^1.2.1":
+"@panva/hkdf@^1.1.1":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@panva/hkdf/-/hkdf-1.2.1.tgz#cb0d111ef700136f4580349ff0226bf25c853f23"
   integrity sha512-6oclG6Y3PiDFcoyk8srjLfVKyMfVCKJ27JwNPViuXziFpmdz+MZnZN/aKY0JGXgYuO/VghU0jcOAZgWXZ1Dmrw==
@@ -3590,10 +3336,10 @@
   resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.25.tgz#f077fdc0b5d0078d30893396ff4827a13f99e817"
   integrity sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==
 
-"@prisma/client@5.16.2":
-  version "5.16.2"
-  resolved "https://registry.yarnpkg.com/@prisma/client/-/client-5.16.2.tgz#21df4c092eac29dcc4431ebed8c92579ffc9d8bd"
-  integrity sha512-+1lmkhR9gHWcTC5oghm2ZKpWljyWdzfazCVlLKUWXVmwHSf52g81aZ8qb6Km5Bs025yBi7puLp3qSLEvktoUtw==
+"@prisma/client@5.16.1":
+  version "5.16.1"
+  resolved "https://registry.yarnpkg.com/@prisma/client/-/client-5.16.1.tgz#65c5649b4701c097e7fa943c91a3140ce8bf053d"
+  integrity sha512-wM9SKQjF0qLxdnOZIVAIMKiz6Hu7vDt4FFAih85K1dk/Rr2mdahy6d3QP41K62N9O0DJJA//gUDA3Mp49xsKIg==
 
 "@prisma/debug@5.16.2":
   version "5.16.2"
@@ -4540,34 +4286,25 @@
     rc-resize-observer "^1.3.1"
     rc-util "^5.38.0"
 
-"@react-dnd/asap@^5.0.1":
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/@react-dnd/asap/-/asap-5.0.2.tgz#1f81f124c1cd6f39511c11a881cfb0f715343488"
-  integrity sha512-WLyfoHvxhs0V9U+GTsGilGgf2QsPl6ZZ44fnv0/b8T3nQyvzxidxsg/ZltbWssbsRDlYW8UKSQMTGotuTotZ6A==
-
-"@react-dnd/invariant@^4.0.1":
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/@react-dnd/invariant/-/invariant-4.0.2.tgz#b92edffca10a26466643349fac7cdfb8799769df"
-  integrity sha512-xKCTqAK/FFauOM9Ta2pswIyT3D8AQlfrYdOi/toTPEhqCuAs1v5tcJ3Y08Izh1cJ5Jchwy9SeAXmMg6zrKs2iw==
-
-"@react-dnd/shallowequal@^4.0.1":
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/@react-dnd/shallowequal/-/shallowequal-4.0.2.tgz#d1b4befa423f692fa4abf1c79209702e7d8ae4b4"
-  integrity sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA==
-
-"@react-hook/intersection-observer@^3.1.1":
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/@react-hook/intersection-observer/-/intersection-observer-3.1.2.tgz#f6f0e42588e03c4afeac0276889d97927d67edc7"
-  integrity sha512-mWU3BMkmmzyYMSuhO9wu3eJVP21N8TcgYm9bZnTrMwuM818bEk+0NRM3hP+c/TqA9Ln5C7qE53p1H0QMtzYdvQ==
-  dependencies:
-    "@react-hook/passive-layout-effect" "^1.2.0"
-    intersection-observer "^0.10.0"
+"@react-hook/latest@^1.0.2":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@react-hook/latest/-/latest-1.0.3.tgz#c2d1d0b0af8b69ec6e2b3a2412ba0768ac82db80"
+  integrity sha512-dy6duzl+JnAZcDbNTfmaP3xHiKtbXYOaz3G51MGVljh548Y8MWzTr+PHLOfvpypEVW9zwvl+VyKjbWKEVbV1Rg==
 
 "@react-hook/passive-layout-effect@^1.2.0":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@react-hook/passive-layout-effect/-/passive-layout-effect-1.2.1.tgz#c06dac2d011f36d61259aa1c6df4f0d5e28bc55e"
   integrity sha512-IwEphTD75liO8g+6taS+4oqz+nnroocNfWVHWz7j+N+ZO2vYrc6PV1q7GQhuahL0IOR7JccFTsFKQ/mb6iZWAg==
 
+"@react-hook/resize-observer@^1.2.6":
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/@react-hook/resize-observer/-/resize-observer-1.2.6.tgz#9a8cf4c5abb09becd60d1d65f6bf10eec211e291"
+  integrity sha512-DlBXtLSW0DqYYTW3Ft1/GQFZlTdKY5VAFIC4+km6IK5NiPPDFchGbEJm1j6pSgMqPRHbUQgHJX7RaR76ic1LWA==
+  dependencies:
+    "@juggle/resize-observer" "^3.3.1"
+    "@react-hook/latest" "^1.0.2"
+    "@react-hook/passive-layout-effect" "^1.2.0"
+
 "@reactflow/background@11.3.14":
   version "11.3.14"
   resolved "https://registry.yarnpkg.com/@reactflow/background/-/background-11.3.14.tgz#778ca30174f3de77fc321459ab3789e66e71a699"
@@ -4634,6 +4371,53 @@
     classcat "^5.0.3"
     zustand "^4.4.1"
 
+"@redocly/ajv@^8.11.0":
+  version "8.11.0"
+  resolved "https://registry.yarnpkg.com/@redocly/ajv/-/ajv-8.11.0.tgz#2fad322888dc0113af026e08fceb3e71aae495ae"
+  integrity sha512-9GWx27t7xWhDIR02PA18nzBdLcKQRgc46xNQvjFkrYk4UOmvKhJ/dawwiX0cCOeetN5LcaaiqQbVOWYK62SGHw==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    json-schema-traverse "^1.0.0"
+    require-from-string "^2.0.2"
+    uri-js "^4.2.2"
+
+"@redocly/config@^0.6.0":
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/@redocly/config/-/config-0.6.0.tgz#dbee2d5b181791b16b847565657f85092ff4c975"
+  integrity sha512-hNVN3eTxFj2nHYX0gGzZxxXwdE0DXWeWou1TIK3HYf0S9VKVxTxjO9EZbMB7iVUqaHkeqy4PSjlBQcEgD0Ftjg==
+
+"@redocly/openapi-core@1.10.3":
+  version "1.10.3"
+  resolved "https://registry.yarnpkg.com/@redocly/openapi-core/-/openapi-core-1.10.3.tgz#907b148dc72caba22b6ddbe76e15c67db84dc10d"
+  integrity sha512-4SnIWh8r3EM1ylcoHIJSnQnuvqRTpQMnf2RU3BfVdcCBa0A1uEyH6XSxgcO5ehxfQGuGGpUXJ+vPh32PUaQDkA==
+  dependencies:
+    "@redocly/ajv" "^8.11.0"
+    colorette "^1.2.0"
+    js-levenshtein "^1.1.6"
+    js-yaml "^4.1.0"
+    lodash.isequal "^4.5.0"
+    minimatch "^5.0.1"
+    node-fetch "^2.6.1"
+    pluralize "^8.0.0"
+    yaml-ast-parser "0.0.43"
+
+"@redocly/openapi-core@^1.0.0-rc.2":
+  version "1.16.0"
+  resolved "https://registry.yarnpkg.com/@redocly/openapi-core/-/openapi-core-1.16.0.tgz#95afcf822890af3fe8f1bde97018370b5cadb8ca"
+  integrity sha512-z06h+svyqbUcdAaePq8LPSwTPlm6Ig7j2VlL8skPBYnJvyaQ2IN7x/JkOvRL4ta+wcOCBdAex5JWnZbKaNktJg==
+  dependencies:
+    "@redocly/ajv" "^8.11.0"
+    "@redocly/config" "^0.6.0"
+    colorette "^1.2.0"
+    https-proxy-agent "^7.0.4"
+    js-levenshtein "^1.1.6"
+    js-yaml "^4.1.0"
+    lodash.isequal "^4.5.0"
+    minimatch "^5.0.1"
+    node-fetch "^2.6.1"
+    pluralize "^8.0.0"
+    yaml-ast-parser "0.0.43"
+
 "@rematch/core@2.2.0":
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/@rematch/core/-/core-2.2.0.tgz#c4e6cc9d369d341afe2345842f43c255b7a44e90"
@@ -4772,6 +4556,49 @@
   resolved "https://registry.yarnpkg.com/@sindresorhus/merge-streams/-/merge-streams-2.3.0.tgz#719df7fb41766bc143369eaa0dd56d8dc87c9958"
   integrity sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==
 
+"@sinonjs/commons@^1", "@sinonjs/commons@^1.3.0", "@sinonjs/commons@^1.7.0":
+  version "1.8.6"
+  resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.8.6.tgz#80c516a4dc264c2a69115e7578d62581ff455ed9"
+  integrity sha512-Ky+XkAkqPZSm3NLBeUng77EBQl3cmeJhITaGHdYH8kjVB+aun3S4XBRti2zt17mtt0mIUDiNxYeoJm6drVvBJQ==
+  dependencies:
+    type-detect "4.0.8"
+
+"@sinonjs/fake-timers@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/@sinonjs/fake-timers/-/fake-timers-6.0.1.tgz#293674fccb3262ac782c7aadfdeca86b10c75c40"
+  integrity sha512-MZPUxrmFubI36XS1DI3qmI0YdN1gks62JtFZvxR67ljjSNCeK6U08Zx4msEWOXuofgqUt6zPHSi1H9fbjR/NRA==
+  dependencies:
+    "@sinonjs/commons" "^1.7.0"
+
+"@sinonjs/formatio@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@sinonjs/formatio/-/formatio-2.0.0.tgz#84db7e9eb5531df18a8c5e0bfb6e449e55e654b2"
+  integrity sha512-ls6CAMA6/5gG+O/IdsBcblvnd8qcO/l1TYoNeAzp3wcISOxlPXQEus0mLcdwazEkWjaBdaJ3TaxmNgCLWwvWzg==
+  dependencies:
+    samsam "1.3.0"
+
+"@sinonjs/formatio@^3.2.1":
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/@sinonjs/formatio/-/formatio-3.2.2.tgz#771c60dfa75ea7f2d68e3b94c7e888a78781372c"
+  integrity sha512-B8SEsgd8gArBLMD6zpRw3juQ2FVSsmdd7qlevyDqzS9WTCtvF55/gAL+h6gue8ZvPYcdiPdvueM/qm//9XzyTQ==
+  dependencies:
+    "@sinonjs/commons" "^1"
+    "@sinonjs/samsam" "^3.1.0"
+
+"@sinonjs/samsam@^3.1.0":
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/@sinonjs/samsam/-/samsam-3.3.3.tgz#46682efd9967b259b81136b9f120fd54585feb4a"
+  integrity sha512-bKCMKZvWIjYD0BLGnNrxVuw4dkWCYsLqFOUWw8VgKF/+5Y+mE7LfHWPIYoDXowH+3a9LsWDMo0uAP8YDosPvHQ==
+  dependencies:
+    "@sinonjs/commons" "^1.3.0"
+    array-from "^2.1.1"
+    lodash "^4.17.15"
+
+"@sinonjs/text-encoding@^0.7.1":
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/@sinonjs/text-encoding/-/text-encoding-0.7.2.tgz#5981a8db18b56ba38ef0efb7d995b12aa7b51918"
+  integrity sha512-sXXKG+uL9IrKqViTtao2Ws6dy0znu9sOaP1di/jKGW1M6VssO8vlpXCQcpZ+jisQ1tTFAC5Jo/EOzFbggBagFQ==
+
 "@slorber/remark-comment@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@slorber/remark-comment/-/remark-comment-1.0.0.tgz#2a020b3f4579c89dec0361673206c28d67e08f5a"
@@ -4781,10 +4608,10 @@
     micromark-util-character "^1.1.0"
     micromark-util-symbol "^1.0.1"
 
-"@stitches/core@^1.2.6":
+"@stitches/react@1.2.8", "@stitches/react@^1.2.8":
   version "1.2.8"
-  resolved "https://registry.yarnpkg.com/@stitches/core/-/core-1.2.8.tgz#dce3b8fdc764fbc6dbea30c83b73bfb52cf96173"
-  integrity sha512-Gfkvwk9o9kE9r9XNBmJRfV8zONvXThnm1tcuojL04Uy5uRyqg93DC83lDebl0rocZCfKSjUv+fWYtMQmEDJldg==
+  resolved "https://registry.yarnpkg.com/@stitches/react/-/react-1.2.8.tgz#954f8008be8d9c65c4e58efa0937f32388ce3a38"
+  integrity sha512-9g9dWI4gsSVe8bNLlb+lMkBYsnIKCZTmvqvDG+Avnn69XfmHZKiaMrx7cgTaddq7aTPPmXiTsbFcUy0xgI4+wA==
 
 "@storybook/addon-actions@8.1.10", "@storybook/addon-actions@^8.0.9":
   version "8.1.10"
@@ -6035,6 +5862,14 @@
     "@swc/counter" "^0.1.3"
     tslib "^2.4.0"
 
+"@swc/helpers@^0.4.14":
+  version "0.4.36"
+  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.4.36.tgz#fcfff76ed52c214f357e8e9d3f37b568908072d9"
+  integrity sha512-5lxnyLEYFskErRPenYItLRSge5DjrJngYKdVjRSrWfza9G6KkgHEXi0vUZiyUeMU5JfXH1YnvXZzSp8ul88o2Q==
+  dependencies:
+    legacy-swc-helpers "npm:@swc/helpers@=0.4.14"
+    tslib "^2.4.0"
+
 "@swc/types@^0.1.9":
   version "0.1.9"
   resolved "https://registry.yarnpkg.com/@swc/types/-/types-0.1.9.tgz#e67cdcc2e4dd74a3cef4474b465eb398e7ae83e2"
@@ -6101,52 +5936,51 @@
     lodash "^4.17.21"
     redent "^3.0.0"
 
-"@testing-library/react@^16.1.0":
-  version "16.1.0"
-  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-16.1.0.tgz#aa0c61398bac82eaf89776967e97de41ac742d71"
-  integrity sha512-Q2ToPvg0KsVL0ohND9A3zLJWcOXXcO8IDu3fj11KhNt0UlCWyFyvnCIBkd12tidB2lkiVRG8VFqdhcqhqnAQtg==
-  dependencies:
-    "@babel/runtime" "^7.12.5"
-
 "@testing-library/user-event@^14.5.2":
   version "14.5.2"
   resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-14.5.2.tgz#db7257d727c891905947bd1c1a99da20e03c2ebd"
   integrity sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==
 
-"@tokens-studio/icons@^0.1.4":
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/@tokens-studio/icons/-/icons-0.1.4.tgz#18799046f08f755680d70a677435bd007031f6b4"
-  integrity sha512-6KGNqnT3NfxV002vHpgsLLOTFdW7TIjtzmaM8r5YqsDvzwQrtHY+Svm0QajzLnC5hifWzmu5aIQAlNSz19flVw==
-
-"@tokens-studio/sd-transforms@^1.2.9":
-  version "1.2.9"
-  resolved "https://registry.yarnpkg.com/@tokens-studio/sd-transforms/-/sd-transforms-1.2.9.tgz#2c33493c94f9194a5f59eab60d60a3fb5091aa8c"
-  integrity sha512-doRL3tjhwmSck/9fH0X1mlBA6derw+8wpmi5hbG2vhAmvc8F89MxIN6JCKSIbVIJNvaprDVlQqSzXLG7Ug7F9A==
+"@tokens-studio/sd-transforms@^0.15.2":
+  version "0.15.2"
+  resolved "https://registry.yarnpkg.com/@tokens-studio/sd-transforms/-/sd-transforms-0.15.2.tgz#2cd374b89a1167d66a9c29c2779623103221fac7"
+  integrity sha512-0ryA1xdZ75cmneUZ/0UQIpzMFUyKPsfQgeu/jZguGFF7vB3/Yr+JsjGU/HFFvWtZfy0c4EQToCSHYwI0g13cBg==
   dependencies:
-    "@bundled-es-modules/deepmerge" "^4.3.1"
-    "@bundled-es-modules/postcss-calc-ast-parser" "^0.1.6"
-    "@tokens-studio/types" "^0.5.1"
+    "@tokens-studio/types" "^0.4.0"
+    color2k "^2.0.1"
     colorjs.io "^0.4.3"
+    deepmerge "^4.3.1"
     expr-eval-fork "^2.0.2"
     is-mergeable-object "^1.1.1"
+    postcss-calc-ast-parser "^0.1.4"
+    style-dictionary "^4.0.0-prerelease.22"
 
-"@tokens-studio/tokens@^0.3.7":
-  version "0.3.7"
-  resolved "https://registry.yarnpkg.com/@tokens-studio/tokens/-/tokens-0.3.7.tgz#a46810a3e64f96b7d7cd47221a2a11f312c52d57"
-  integrity sha512-rzsaD40DBfOaHF2oOa8vb8iB7hlVS1WIg9JAl/VfoWSbkBSMv1nmo1FqFiH3hdJY0tiiQoXCygPrmRS7GQSlnQ==
-  dependencies:
-    deepmerge-ts "^7.0.3"
+"@tokens-studio/tokens@0.0.24", "@tokens-studio/tokens@^0.0.24":
+  version "0.0.24"
+  resolved "https://registry.yarnpkg.com/@tokens-studio/tokens/-/tokens-0.0.24.tgz#1063825e87cd07492b2aedd6dcd6ffb207ac3e7c"
+  integrity sha512-0fuuYAmR5LuaMQelsliuPAvBJ29Aa7pw5fCF6WJd0wpOoLqSV3ttap0D6YRbi67cCmWsKH57mM7jn0jAbEqm4A==
 
-"@tokens-studio/types@^0.5.1":
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/@tokens-studio/types/-/types-0.5.1.tgz#5037e58c4b2c306762f12e8d9685e9aeebb21685"
-  integrity sha512-LdCF9ZH5ej4Gb6n58x5fTkhstxjXDZc1SWteMWY6EiddLQJVONMIgYOrWrf1extlkSLjagX8WS0B63bAqeltnA==
+"@tokens-studio/types@^0.2.3":
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/@tokens-studio/types/-/types-0.2.5.tgz#fbddad1d0040f1316ee74dbd42a389f2f3d2fcbc"
+  integrity sha512-pJ0zWxGnEjca4dznFIHC9/oXuovu3DKHUhLDNJVzTRZEVXhWkIRIUbjDwIRihxBr39c776W+3thYvWMgChT0Rw==
+
+"@tokens-studio/types@^0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@tokens-studio/types/-/types-0.3.0.tgz#ac0579df362b6b9e47c8893e3ca110d3831f7f26"
+  integrity sha512-MgGe1HFH2R/advBxpETgB1VGnCmh3j08igsPmc/1xvm/m2A5fYPmnzqjX6SFlHiajIJ5DEwYbHDzUAO4POn0tw==
+
+"@tokens-studio/types@^0.4.0":
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/@tokens-studio/types/-/types-0.4.0.tgz#882088f22201e8f9112279f3ebacf8557213c615"
+  integrity sha512-rp5t0NP3Kai+Z+euGfHRUMn3AvPQ0bd9Dd2qbtfgnTvujxM5QYVr4psx/mwrVwA3NS9829mE6cD3ln+PIaptBA==
 
-"@tokens-studio/ui@^1.0.13":
-  version "1.0.13"
-  resolved "https://registry.yarnpkg.com/@tokens-studio/ui/-/ui-1.0.13.tgz#e4e7356b2cbfa506f871227d4b21a35607fd09b1"
-  integrity sha512-KvFBpWpWtShnsXXPyLU4xsMYI3Hws1A9N4IIbqOMbv7hpihcixktF81yq44txPkvn8JNw1xob9ZhofqDa1cwwg==
+"@tokens-studio/ui@0.6.9", "@tokens-studio/ui@^0.6.9":
+  version "0.6.9"
+  resolved "https://registry.yarnpkg.com/@tokens-studio/ui/-/ui-0.6.9.tgz#5d889526a697e41b436363a11074b4c6df224965"
+  integrity sha512-3StYQeq8cpX+sGrf6qFMdzTydsPVJr263j7merFKo42Jtq8KqzlDFleeWIaF90BU0TMqBDx5yiynpLJq+jEdEQ==
   dependencies:
+    "@iconicicons/react" "^1.5.1"
     "@radix-ui/react-accordion" "^1.1.2"
     "@radix-ui/react-avatar" "^1.0.2"
     "@radix-ui/react-checkbox" "^1.0.4"
@@ -6164,36 +5998,41 @@
     "@radix-ui/react-toast" "^1.1.3"
     "@radix-ui/react-toggle-group" "^1.0.2"
     "@radix-ui/react-tooltip" "^1.0.4"
-    clsx "^2.1.1"
+
+"@tootallnate/once@1":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"
+  integrity sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==
 
 "@trysound/sax@0.2.0":
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"
   integrity sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==
 
-"@ts-rest/core@^3.51.0":
-  version "3.51.0"
-  resolved "https://registry.yarnpkg.com/@ts-rest/core/-/core-3.51.0.tgz#7e56fbae7abc4037a84396fb098a7eb24759d4a8"
-  integrity sha512-v6lnWEcpZj1UgN9wb84XQ+EORP1QEtncFumoXMJjno5ZUV6vdjKze3MYcQN0C6vjBpIJPQEaI/gab2jr4/0KzQ==
+"@ts-rest/core@3.45.2":
+  version "3.45.2"
+  resolved "https://registry.yarnpkg.com/@ts-rest/core/-/core-3.45.2.tgz#9e2e1b8377bd88bfc326a01cc7599ea2199f2603"
+  integrity sha512-Eiv+Sa23MbsAd1Gx9vNJ+IFCDyLZNdJ+UuGMKbFvb+/NmgcBR1VL1UIVtEkd5DJxpYMMd8SLvW91RgB2TS8iPw==
 
-"@ts-rest/open-api@^3.51.0":
-  version "3.51.0"
-  resolved "https://registry.yarnpkg.com/@ts-rest/open-api/-/open-api-3.51.0.tgz#8f30e9a6d679143b199bc08fc9350b8b5f0ba4ae"
-  integrity sha512-fvpvRr6HIbAMNZR//QQQi75z5qTxMEBMRtmbaBXVi5e1WVVwOK7P6YBaGWTQp6DXSvsZVULX5VZXmsDd1Z1dew==
+"@ts-rest/open-api@3.45.2":
+  version "3.45.2"
+  resolved "https://registry.yarnpkg.com/@ts-rest/open-api/-/open-api-3.45.2.tgz#fa24730eac239c420f7e950fad9a787d0b706572"
+  integrity sha512-TG5GvD0eyicMR3HjEAMTO2ulO7x/ADSn5bfLF/ZDdVXla48PiQdwhG4NsjVbsUDCghwx+6y5u2aTYjypzdiXQg==
   dependencies:
     "@anatine/zod-openapi" "^1.12.0"
     openapi3-ts "^2.0.2"
 
-"@ts-rest/react-query@^3.51.0":
-  version "3.51.0"
-  resolved "https://registry.yarnpkg.com/@ts-rest/react-query/-/react-query-3.51.0.tgz#fc30f2404008a8ce385a879ddd2a45a33ce42393"
-  integrity sha512-pWrbyRqvcvmjvm+ORu3zE3sPFqsS6CHOq5vra/UtyLEgXrcnEA+fu/7d9tj/+BLRwe0kOWvalu2S3/d3SDxvFQ==
+"@ts-rest/react-query@3.45.2":
+  version "3.45.2"
+  resolved "https://registry.yarnpkg.com/@ts-rest/react-query/-/react-query-3.45.2.tgz#073d1728365fd6279b3bd37111fedd374973e2d4"
+  integrity sha512-OFl54tb+d2vJsPENr0ehmb2KrXmXTbwEDMmoIW7iyAHEIbPiL03QreeiFykZpsRDdTUjQJY2TgOmFKCCtLozWA==
 
-"@ts-rest/serverless@^3.51.0":
-  version "3.51.0"
-  resolved "https://registry.yarnpkg.com/@ts-rest/serverless/-/serverless-3.51.0.tgz#40b7e99dc4957473133b1473f1faa475702c3aa2"
-  integrity sha512-BjwmLPgnYifdDjSpSvhZk+v1P+3CiM/jpxKNUgdw8RfgnDy/+aaOPmAcSkjhBCOIu6ASChuv/sNpiuWx3YyPUw==
+"@ts-rest/serverless@3.45.2":
+  version "3.45.2"
+  resolved "https://registry.yarnpkg.com/@ts-rest/serverless/-/serverless-3.45.2.tgz#d762db85d374a8e99a6345e56a5b909dc3232522"
+  integrity sha512-7+37i9s9j/5OfdzLB17/PDQBco9v38WYn3fbYLr6x/zHYQqq8RfXXbmHYGvFdE+y3eizat2J0pM2Djqsb4Uppg==
   dependencies:
+    "@ts-rest/core" "3.45.2"
     itty-router "^5.0.9"
 
 "@tsconfig/node10@^1.0.7":
@@ -6228,7 +6067,7 @@
   resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-5.0.4.tgz#1a31c3d378850d2778dabb6374d036dcba4ba708"
   integrity sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==
 
-"@types/babel__core@^7.18.0":
+"@types/babel__core@^7.0.0", "@types/babel__core@^7.1.7", "@types/babel__core@^7.18.0":
   version "7.20.5"
   resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.20.5.tgz#3df15f27ba85319caa07ba08d0721889bb39c017"
   integrity sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==
@@ -6254,7 +6093,7 @@
     "@babel/parser" "^7.1.0"
     "@babel/types" "^7.0.0"
 
-"@types/babel__traverse@*", "@types/babel__traverse@^7.18.0":
+"@types/babel__traverse@*", "@types/babel__traverse@^7.0.4", "@types/babel__traverse@^7.0.6", "@types/babel__traverse@^7.18.0":
   version "7.20.6"
   resolved "https://registry.yarnpkg.com/@types/babel__traverse/-/babel__traverse-7.20.6.tgz#8dc9f0ae0f202c08d8d4dab648912c8d6038e3f7"
   integrity sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg==
@@ -6628,7 +6467,7 @@
   resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.14.tgz#319b63ad6df705ee2a65a73ef042c8271e696613"
   integrity sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg==
 
-"@types/glob@^7.1.3":
+"@types/glob@^7.1.1", "@types/glob@^7.1.3":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.2.0.tgz#bc1b5bf3aa92f25bd5dd39f35c57361bdce5b2eb"
   integrity sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==
@@ -6636,6 +6475,13 @@
     "@types/minimatch" "*"
     "@types/node" "*"
 
+"@types/graceful-fs@^4.1.2":
+  version "4.1.9"
+  resolved "https://registry.yarnpkg.com/@types/graceful-fs/-/graceful-fs-4.1.9.tgz#2a06bc0f68a20ab37b3e36aa238be6abdf49e8b4"
+  integrity sha512-olP3sd1qOEe5dXTSaFvQG+02VdRXcdytWLAZsAq1PecU8uqQAhkrnbli7DagjtXKW/Bl7YJbUsa8MPcuc8LHEQ==
+  dependencies:
+    "@types/node" "*"
+
 "@types/graphlib@^2.1.8":
   version "2.1.12"
   resolved "https://registry.yarnpkg.com/@types/graphlib/-/graphlib-2.1.12.tgz#089d1218bafe2277c98b12597abb24c3b73965aa"
@@ -6726,7 +6572,7 @@
   resolved "https://registry.yarnpkg.com/@types/js-cookie/-/js-cookie-2.2.7.tgz#226a9e31680835a6188e887f3988e60c04d3f6a3"
   integrity sha512-aLkWa0C0vO5b4Sr798E26QgOkss68Un0bLjs7u9qxzPT5CG+8DuNTffWES58YzJs3hrVAOs1wonycqEBqNJubA==
 
-"@types/json-schema@*", "@types/json-schema@^7.0.4", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.8", "@types/json-schema@^7.0.9":
+"@types/json-schema@*", "@types/json-schema@^7.0.4", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.7", "@types/json-schema@^7.0.8", "@types/json-schema@^7.0.9":
   version "7.0.15"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.15.tgz#596a1747233694d50f6ad8a7869fcb6f56cf5841"
   integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==
@@ -6777,6 +6623,11 @@
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-5.1.2.tgz#07508b45797cb81ec3f273011b054cd0755eddca"
   integrity sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==
 
+"@types/minimatch@^3.0.3":
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.5.tgz#1001cc5e6a3704b83c236027e77f2f58ea010f40"
+  integrity sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==
+
 "@types/minimist@^1.2.0":
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/@types/minimist/-/minimist-1.2.5.tgz#ec10755e871497bcd83efe927e43ec46e8c0747e"
@@ -6814,13 +6665,6 @@
   dependencies:
     undici-types "~5.26.4"
 
-"@types/node@20.17.9":
-  version "20.17.9"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.17.9.tgz#5f141d4b7ee125cdee5faefe28de095398865bab"
-  integrity sha512-0JOXkRyLanfGPE2QRCwgxhzlBAvaRdCNMcvbd7jFfpmD4eEXll7LRwy5ymJmyeZqk7Nh7eD2LeUyQ68BbndmXw==
-  dependencies:
-    undici-types "~6.19.2"
-
 "@types/node@20.x":
   version "20.14.11"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-20.14.11.tgz#09b300423343460455043ddd4d0ded6ac579b74b"
@@ -6838,13 +6682,20 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.45.tgz#2c0fafd78705e7a18b7906b5201a522719dc5190"
   integrity sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==
 
-"@types/node@^18.0.0", "@types/node@^18.11.18", "@types/node@^18.15.11":
+"@types/node@^18.0.0", "@types/node@^18.15.11":
   version "18.19.39"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-18.19.39.tgz#c316340a5b4adca3aee9dcbf05de385978590593"
   integrity sha512-nPwTRDKUctxw3di5b4TfT3I0sWDiWoPQCZjXhvdkINntwr8lcoVCKsTgnXeRubKIlfnV+eN/HYk6Jb40tbcEAQ==
   dependencies:
     undici-types "~5.26.4"
 
+"@types/node@^18.11.18":
+  version "18.19.42"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.19.42.tgz#b54ed4752c85427906aab40917b0f7f3d724bf72"
+  integrity sha512-d2ZFc/3lnK2YCYhos8iaNIYu9Vfhr92nHiyJHRltXWjXUBjEE+A4I58Tdbnw4VhggSW+2j5y5gTrLs4biNnubg==
+  dependencies:
+    undici-types "~5.26.4"
+
 "@types/normalize-package-data@^2.4.0":
   version "2.4.4"
   resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.4.tgz#56e2cc26c397c038fab0e3a917a12d5c5909e901"
@@ -6855,6 +6706,11 @@
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.2.tgz#5950e50960793055845e956c427fc2b0d70c5239"
   integrity sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==
 
+"@types/prettier@^2.0.0":
+  version "2.7.3"
+  resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.7.3.tgz#3e51a17e291d01d17d3fc61422015a933af7a08f"
+  integrity sha512-+68kP9yzs4LMp7VNh8gdzMSPZFL44MLGqiHWvttYJe+6qnuVr4Ek9wSBQoveqY/r+LwjCcU29kNVkidwim+kYA==
+
 "@types/pretty-hrtime@^1.0.0":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@types/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#ee1bd8c9f7a01b3445786aad0ef23aba5f511a44"
@@ -7004,6 +6860,16 @@
   dependencies:
     "@types/node" "*"
 
+"@types/stack-utils@^2.0.0":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.3.tgz#6209321eb2c1712a7e7466422b8cb1fc0d9dd5d8"
+  integrity sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==
+
+"@types/stylis@4.2.5":
+  version "4.2.5"
+  resolved "https://registry.yarnpkg.com/@types/stylis/-/stylis-4.2.5.tgz#1daa6456f40959d06157698a653a9ab0a70281df"
+  integrity sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==
+
 "@types/trusted-types@^2.0.2":
   version "2.0.7"
   resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.7.tgz#baccb07a970b91707df3a3e8ba6896c57ead2d11"
@@ -7046,6 +6912,13 @@
   resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-21.0.3.tgz#815e30b786d2e8f0dcd85fd5bcf5e1a04d008f15"
   integrity sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==
 
+"@types/yargs@^15.0.0":
+  version "15.0.19"
+  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-15.0.19.tgz#328fb89e46109ecbdb70c295d96ff2f46dfd01b9"
+  integrity sha512-2XUaGVmyQjgyAZldf0D0c14vvo/yv0MhQBSTJcejMMaitsn3nxCB6TmH4G0ZQf+uxROOa9mpanoSm8h6SG/1ZA==
+  dependencies:
+    "@types/yargs-parser" "*"
+
 "@types/yargs@^17.0.8":
   version "17.0.32"
   resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-17.0.32.tgz#030774723a2f7faafebf645f4e5a48371dca6229"
@@ -7185,7 +7058,7 @@
   resolved "https://registry.yarnpkg.com/@use-gesture/core/-/core-10.3.1.tgz#976c9421e905f0079d49822cfd5c2e56b808fc56"
   integrity sha512-WcINiDt8WjqBdUXye25anHiNxPc0VOrlT8F6LLkU6cycrOGUDyY/yyFmsg3k8i5OLvv25llc0QC45GhR/C8llw==
 
-"@use-gesture/react@^10.2.27":
+"@use-gesture/react@^10.2.23":
   version "10.3.1"
   resolved "https://registry.yarnpkg.com/@use-gesture/react/-/react-10.3.1.tgz#17a743a894d9bd9a0d1980c618f37f0164469867"
   integrity sha512-Yy19y6O2GJq8f7CHf7L0nxL8bf4PZCPaVOCgJrusOeFHY1LvHgYXnmnXg6N5iwAnbgbZCDjo60SiM6IPJi9C5g==
@@ -7492,6 +7365,19 @@
   resolved "https://registry.yarnpkg.com/@zip.js/zip.js/-/zip.js-2.7.45.tgz#823fe2789401d8c1d836ce866578379ec1bd6f0b"
   integrity sha512-Mm2EXF33DJQ/3GWWEWeP1UCqzpQ5+fiMvT3QWspsXY05DyqqxWu7a9awSzU4/spHMHVFrTjani1PR0vprgZpow==
 
+JSONStream@^1.2.1, JSONStream@^1.3.5:
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-1.3.5.tgz#3208c1f08d3a4d99261ab64f92302bc15e111ca0"
+  integrity sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==
+  dependencies:
+    jsonparse "^1.2.0"
+    through ">=2.2.7 <3"
+
+abab@^2.0.3, abab@^2.0.5:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.6.tgz#41b80f2c871d19686216b82309231cfd3cb3d291"
+  integrity sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==
+
 abbrev@1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
@@ -7512,6 +7398,14 @@ accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.8:
     mime-types "~2.1.34"
     negotiator "0.6.3"
 
+acorn-globals@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-6.0.0.tgz#46cdd39f0f8ff08a876619b55f5ac8a6dc770b45"
+  integrity sha512-ZQl7LOWaF5ePqqcX4hLuv/bLXYQNfNWw2c0/yX/TsPRKamzHcTGQnlCjHT3TsmkOUVEPS3crCxiPfdzE/Trlhg==
+  dependencies:
+    acorn "^7.1.1"
+    acorn-walk "^7.1.1"
+
 acorn-import-attributes@^1.9.5:
   version "1.9.5"
   resolved "https://registry.yarnpkg.com/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz#7eb1557b1ba05ef18b5ed0ec67591bfab04688ef"
@@ -7522,7 +7416,7 @@ acorn-jsx@^5.0.0, acorn-jsx@^5.3.1, acorn-jsx@^5.3.2:
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
 
-acorn-walk@^7.2.0:
+acorn-walk@^7.1.1, acorn-walk@^7.2.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc"
   integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==
@@ -7534,7 +7428,7 @@ acorn-walk@^8.0.0, acorn-walk@^8.1.1, acorn-walk@^8.3.2:
   dependencies:
     acorn "^8.11.0"
 
-acorn@^7.4.1:
+acorn@^7.1.1, acorn@^7.4.1:
   version "7.4.1"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
@@ -7544,11 +7438,23 @@ acorn@^8.0.0, acorn@^8.0.4, acorn@^8.11.0, acorn@^8.11.3, acorn@^8.4.1, acorn@^8
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.12.0.tgz#1627bfa2e058148036133b8d9b51a700663c294c"
   integrity sha512-RTvkC4w+KNXrM39/lWCUaG0IbRkWdCv7W/IOW9oU6SawyxulvkQy5HQPVTKxEjczcUvapcrw3cFx/60VN/NRNw==
 
+acorn@^8.2.4:
+  version "8.12.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.12.1.tgz#71616bdccbe25e27a54439e0046e89ca76df2248"
+  integrity sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==
+
 address@^1.0.1, address@^1.1.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/address/-/address-1.2.2.tgz#2b5248dac5485a6390532c6a517fda2e3faac89e"
   integrity sha512-4B/qKCfeE/ODUaAUpSwfzazo5x29WD4r3vXiWsB7I2mSDAihwEqKO+g8GELZUQSSAo5e1XTYh3ZVfLyxBc12nA==
 
+agent-base@6:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77"
+  integrity sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==
+  dependencies:
+    debug "4"
+
 agent-base@^7.0.2, agent-base@^7.1.0:
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-7.1.1.tgz#bdbded7dfb096b751a2a087eeeb9664725b2e317"
@@ -7610,16 +7516,6 @@ ajv@^8.0.0, ajv@^8.9.0:
     require-from-string "^2.0.2"
     uri-js "^4.4.1"
 
-ajv@^8.17.1:
-  version "8.17.1"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.17.1.tgz#37d9a5c776af6bc92d7f4f9510eba4c0a60d11a6"
-  integrity sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==
-  dependencies:
-    fast-deep-equal "^3.1.3"
-    fast-uri "^3.0.1"
-    json-schema-traverse "^1.0.0"
-    require-from-string "^2.0.2"
-
 algoliasearch-helper@^3.13.3:
   version "3.22.1"
   resolved "https://registry.yarnpkg.com/algoliasearch-helper/-/algoliasearch-helper-3.22.1.tgz#c4b91265aa2e58eea4413bc57c4611eaf391e597"
@@ -7648,11 +7544,6 @@ algoliasearch@^4.18.0, algoliasearch@^4.19.1:
     "@algolia/requester-node-http" "4.23.3"
     "@algolia/transporter" "4.23.3"
 
-anser@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/anser/-/anser-2.1.1.tgz#8afae28d345424c82de89cc0e4d1348eb0c5af7c"
-  integrity sha512-nqLm4HxOTpeLOxcmB3QWmV5TcDFhW9y/fyQ+hivtDFcK4OQ+pQ5fzPnXHM1Mfcm0VkLtvVi1TCPr++Qy0Q/3EQ==
-
 ansi-align@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-3.0.1.tgz#0cdf12e111ace773a86e9a1fad1225c43cb19a59"
@@ -7665,7 +7556,12 @@ ansi-colors@^4.1.1, ansi-colors@^4.1.3:
   resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.3.tgz#37611340eb2243e70cc604cad35d63270d48781b"
   integrity sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==
 
-ansi-escapes@^4.3.0:
+ansi-escapes@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.2.0.tgz#8780b98ff9dbf5638152d1f1fe5c1d7b4442976b"
+  integrity sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==
+
+ansi-escapes@^4.2.1, ansi-escapes@^4.3.0:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-4.3.2.tgz#6b2291d1db7d98b6521d5f1efa42d0f3a9feb65e"
   integrity sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==
@@ -7689,7 +7585,12 @@ ansi-regex@^2.0.0:
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
   integrity sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==
 
-ansi-regex@^5.0.1:
+ansi-regex@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-3.0.1.tgz#123d6479e92ad45ad897d4054e3c7ca7db4944e1"
+  integrity sha512-+O9Jct8wf++lXxxFc4hc8LsjaSq0HFzzL7cVsw8pRDIPdjKD2mT4ytDZlLuSBZ4cLKZFXIrMGO7DbQCtMJJMKw==
+
+ansi-regex@^5.0.0, ansi-regex@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
   integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
@@ -7704,7 +7605,12 @@ ansi-sequence-parser@^1.1.0:
   resolved "https://registry.yarnpkg.com/ansi-sequence-parser/-/ansi-sequence-parser-1.1.1.tgz#e0aa1cdcbc8f8bb0b5bca625aac41f5f056973cf"
   integrity sha512-vJXt3yiaUL4UU546s3rPXlsry/RnM730G1+HkpKE012AN0sx1eOrxSu95oKDIonskeLTijMgqWZ3uDEe3NFvyg==
 
-ansi-styles@^3.2.1:
+ansi-styles@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
+  integrity sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==
+
+ansi-styles@^3.0.0, ansi-styles@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
   integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
@@ -7728,7 +7634,20 @@ ansi-styles@^6.0.0, ansi-styles@^6.1.0:
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.2.1.tgz#0e62320cf99c21afff3b3012192546aacbfb05c5"
   integrity sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==
 
-anymatch@~3.1.2:
+any-promise@^1.0.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
+  integrity sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==
+
+anymatch@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-2.0.0.tgz#bcb24b4f37934d9aa7ac17b4adaf89e7c76ef2eb"
+  integrity sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==
+  dependencies:
+    micromatch "^3.1.4"
+    normalize-path "^2.1.1"
+
+anymatch@^3.0.3, anymatch@~3.1.2:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e"
   integrity sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==
@@ -7814,6 +7733,21 @@ aria-query@^5.0.0:
   dependencies:
     dequal "^2.0.3"
 
+arr-diff@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-4.0.0.tgz#d6461074febfec71e7e15235761a329a5dc7c520"
+  integrity sha512-YVIQ82gZPGBebQV/a8dar4AitzCQs0jjXwMPZllpXMaGjXPYVUawSxQrRsjhjupyVxEvbHgUmIhKVlND+j02kA==
+
+arr-flatten@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.1.0.tgz#36048bbff4e7b47e136644316c99669ea5ae91f1"
+  integrity sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==
+
+arr-union@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/arr-union/-/arr-union-3.1.0.tgz#e39b09aea9def866a8f206e288af63919bae39c4"
+  integrity sha512-sKpyeERZ02v1FeCZT8lrfJq5u6goHCtpTAzPwJYe7c8SPFOboNjNg1vz2L4VTn9T4PQxEx13TbXLmYUcS6Ug7Q==
+
 array-buffer-byte-length@^1.0.0, array-buffer-byte-length@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/array-buffer-byte-length/-/array-buffer-byte-length-1.0.1.tgz#1e5583ec16763540a27ae52eed99ff899223568f"
@@ -7822,11 +7756,26 @@ array-buffer-byte-length@^1.0.0, array-buffer-byte-length@^1.0.1:
     call-bind "^1.0.5"
     is-array-buffer "^3.0.4"
 
+array-differ@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/array-differ/-/array-differ-1.0.0.tgz#eff52e3758249d33be402b8bb8e564bb2b5d4031"
+  integrity sha512-LeZY+DZDRnvP7eMuQ6LHfCzUGxAAIViUBliK24P3hWXL6y4SortgR6Nim6xrkfSLlmH0+k+9NYNwVC2s53ZrYQ==
+
+array-differ@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/array-differ/-/array-differ-3.0.0.tgz#3cbb3d0f316810eafcc47624734237d6aee4ae6b"
+  integrity sha512-THtfYS6KtME/yIAhKjZ2ul7XI96lQGHRputJQHO80LAWQnuGP4iCIN8vdMRboGbIEYBwU33q8Tch1os2+X0kMg==
+
 array-flatten@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
   integrity sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==
 
+array-from@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/array-from/-/array-from-2.1.1.tgz#cfe9d8c26628b9dc5aecc62a9f5d8f1f352c1195"
+  integrity sha512-GQTc6Uupx1FCavi5mPzBvVT7nEOeWMmUA9P95wpfpW1XwMSKs+KaymD5C2Up7KAUKg/mYwbsUYzdZWcoajlNZg==
+
 array-includes@^3.1.6, array-includes@^3.1.8:
   version "3.1.8"
   resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.8.tgz#5e370cbe172fdd5dd6530c1d4aadda25281ba97d"
@@ -7844,11 +7793,28 @@ array-move@^4.0.0:
   resolved "https://registry.yarnpkg.com/array-move/-/array-move-4.0.0.tgz#2c3730f056cc926f62a59769a5a8cda2fb6d8c55"
   integrity sha512-+RY54S8OuVvg94THpneQvFRmqWdAHeqtMzgMW6JNurHxe8rsS07cHQdfGkXnTUXiBcyZ0j3SiDIxxj0RPiqCkQ==
 
+array-union@^1.0.1, array-union@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
+  integrity sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==
+  dependencies:
+    array-uniq "^1.0.1"
+
 array-union@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
   integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==
 
+array-uniq@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
+  integrity sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==
+
+array-unique@^0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
+  integrity sha512-SleRWjh9JUud2wH1hPs9rZBZ33H6T9HOiL0uwGnGx9FpE6wKGyfWugmbkEOIs6qWrZhg0LWeLziLrEwQJhs5mQ==
+
 array.prototype.findlast@^1.2.5:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz#3e4fbcb30a15a7f5bf64cf2faae22d139c2e4904"
@@ -7916,11 +7882,16 @@ arraybuffer.prototype.slice@^1.0.3:
     is-array-buffer "^3.0.4"
     is-shared-array-buffer "^1.0.2"
 
-arrify@^1.0.1:
+arrify@^1.0.0, arrify@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
   integrity sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==
 
+arrify@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/arrify/-/arrify-2.0.1.tgz#c9655e9331e0abcd588d2a7cad7e9956f66701fa"
+  integrity sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==
+
 asn1@~0.2.3:
   version "0.2.6"
   resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.6.tgz#0d3a7bb6e64e02a90c0303b31f292868ea09a08d"
@@ -7949,6 +7920,11 @@ assertion-error@^1.1.0:
   resolved "https://registry.yarnpkg.com/assertion-error/-/assertion-error-1.1.0.tgz#e60b6b0e8f301bd97e5375215bda406c85118c0b"
   integrity sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==
 
+assign-symbols@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
+  integrity sha512-Q+JC7Whu8HhmTdBph/Tq59IoRtoy6KAm5zzPv00WdujX82lbAL8K7WVjne7vdCsAmbF4AYaDOPyO3k0kl8qIrw==
+
 ast-types@^0.16.1:
   version "0.16.1"
   resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.16.1.tgz#7a9da1617c9081bc121faafe91711b4c8bb81da2"
@@ -7966,6 +7942,13 @@ astring@^1.8.0:
   resolved "https://registry.yarnpkg.com/astring/-/astring-1.8.6.tgz#2c9c157cf1739d67561c56ba896e6948f6b93731"
   integrity sha512-ISvCdHdlTDlH5IpxQJIex7BWBywFWgjJSVdwst+/iQCoEYnyOaQ95+X1JGshuBjGp6nxKUy1jMgE3zPqN7fQdg==
 
+async@^2.6.0, async@^2.6.2:
+  version "2.6.4"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.6.4.tgz#706b7ff6084664cd7eae713f6f965433b5504221"
+  integrity sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==
+  dependencies:
+    lodash "^4.17.14"
+
 async@^3.2.0, async@^3.2.3:
   version "3.2.5"
   resolved "https://registry.yarnpkg.com/async/-/async-3.2.5.tgz#ebd52a8fdaf7a2289a24df399f8d8485c8a46b66"
@@ -7986,6 +7969,11 @@ atob-lite@^2.0.0:
   resolved "https://registry.yarnpkg.com/atob-lite/-/atob-lite-2.0.0.tgz#0fef5ad46f1bd7a8502c65727f0367d5ee43d696"
   integrity sha512-LEeSAWeh2Gfa2FtlQE1shxQ8zi5F9GHarrGKz08TMdODD5T4eH6BMsvtnhbWZ+XQn+Gb6om/917ucvRu7l7ukw==
 
+atob@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
+  integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
+
 audio-buffer-from@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/audio-buffer-from/-/audio-buffer-from-1.1.1.tgz#6ba1dd0d463ce19e7ba19f91f5e1f725178d38d8"
@@ -8042,18 +8030,6 @@ autoprefixer@^10.4.14, autoprefixer@^10.4.19:
     picocolors "^1.0.0"
     postcss-value-parser "^4.2.0"
 
-autoprefixer@^10.4.20:
-  version "10.4.20"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.20.tgz#5caec14d43976ef42e32dcb4bd62878e96be5b3b"
-  integrity sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==
-  dependencies:
-    browserslist "^4.23.3"
-    caniuse-lite "^1.0.30001646"
-    fraction.js "^4.3.7"
-    normalize-range "^0.1.2"
-    picocolors "^1.0.1"
-    postcss-value-parser "^4.2.0"
-
 available-typed-arrays@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz#a5cc375d6a03c2efc87a553f3e0b1522def14846"
@@ -8071,6 +8047,13 @@ aws4@^1.8.0:
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.13.0.tgz#d9b802e9bb9c248d7be5f7f5ef178dc3684e9dcc"
   integrity sha512-3AungXC4I8kKsS9PuS4JH2nc+0bVY/mjgrephHTIi8fpEeGsTHBUJeosp0Wc1myYMElmD0B3Oc4XL/HVJ4PV2g==
 
+axios@^0.21.1:
+  version "0.21.4"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.4.tgz#c67b90dc0568e5c1cf2b0b858c43ba28e2eda575"
+  integrity sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==
+  dependencies:
+    follow-redirects "^1.14.0"
+
 axios@^1.4.0, axios@^1.6.1, axios@^1.7.2:
   version "1.7.2"
   resolved "https://registry.yarnpkg.com/axios/-/axios-1.7.2.tgz#b625db8a7051fbea61c35a3cbb3a1daa7b9c7621"
@@ -8080,11 +8063,34 @@ axios@^1.4.0, axios@^1.6.1, axios@^1.7.2:
     form-data "^4.0.0"
     proxy-from-env "^1.1.0"
 
+axios@^1.7.3:
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.7.3.tgz#a1125f2faf702bc8e8f2104ec3a76fab40257d85"
+  integrity sha512-Ar7ND9pU99eJ9GpoGQKhKf58GpUOgnzuaB7ueNQ5BMi0p+LZ5oaEnfF999fAArcTIBwXTCHAmGcHOZJaWPq9Nw==
+  dependencies:
+    follow-redirects "^1.15.6"
+    form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
+
 babel-core@^7.0.0-bridge.0:
   version "7.0.0-bridge.0"
   resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-7.0.0-bridge.0.tgz#95a492ddd90f9b4e9a4a1da14eb335b87b634ece"
   integrity sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg==
 
+babel-jest@^26.6.3:
+  version "26.6.3"
+  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-26.6.3.tgz#d87d25cb0037577a0c89f82e5755c5d293c01056"
+  integrity sha512-pl4Q+GAVOHwvjrck6jKjvmGhnO3jHX/xuB9d27f+EJZ/6k+6nMuPjorrYp7s++bKKdANwzElBWnLWaObvTnaZA==
+  dependencies:
+    "@jest/transform" "^26.6.2"
+    "@jest/types" "^26.6.2"
+    "@types/babel__core" "^7.1.7"
+    babel-plugin-istanbul "^6.0.0"
+    babel-preset-jest "^26.6.2"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.4"
+    slash "^3.0.0"
+
 babel-loader@^9.1.3:
   version "9.1.3"
   resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-9.1.3.tgz#3d0e01b4e69760cc694ee306fe16d358aa1c6f9a"
@@ -8100,6 +8106,27 @@ babel-plugin-dynamic-import-node@^2.3.3:
   dependencies:
     object.assign "^4.1.0"
 
+babel-plugin-istanbul@^6.0.0:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz#fa88ec59232fd9b4e36dbbc540a8ec9a9b47da73"
+  integrity sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@istanbuljs/load-nyc-config" "^1.0.0"
+    "@istanbuljs/schema" "^0.1.2"
+    istanbul-lib-instrument "^5.0.4"
+    test-exclude "^6.0.0"
+
+babel-plugin-jest-hoist@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-26.6.2.tgz#8185bd030348d254c6d7dd974355e6a28b21e62d"
+  integrity sha512-PO9t0697lNTmcEHH69mdtYiOIkkOlj9fySqfO3K1eCcdISevLAE0xY59VLLUj0SoiPiTX/JU2CYFpILydUa5Lw==
+  dependencies:
+    "@babel/template" "^7.3.3"
+    "@babel/types" "^7.3.3"
+    "@types/babel__core" "^7.0.0"
+    "@types/babel__traverse" "^7.0.6"
+
 babel-plugin-polyfill-corejs2@^0.4.10:
   version "0.4.11"
   resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.11.tgz#30320dfe3ffe1a336c15afdcdafd6fd615b25e33"
@@ -8124,6 +8151,32 @@ babel-plugin-polyfill-regenerator@^0.6.1:
   dependencies:
     "@babel/helper-define-polyfill-provider" "^0.6.2"
 
+babel-preset-current-node-syntax@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz#b4399239b89b2a011f9ddbe3e4f401fc40cff73b"
+  integrity sha512-M7LQ0bxarkxQoN+vz5aJPsLBn77n8QgTFmo8WK0/44auK2xlCXrYcUxHFxgU7qW5Yzw/CjmLRK2uJzaCd7LvqQ==
+  dependencies:
+    "@babel/plugin-syntax-async-generators" "^7.8.4"
+    "@babel/plugin-syntax-bigint" "^7.8.3"
+    "@babel/plugin-syntax-class-properties" "^7.8.3"
+    "@babel/plugin-syntax-import-meta" "^7.8.3"
+    "@babel/plugin-syntax-json-strings" "^7.8.3"
+    "@babel/plugin-syntax-logical-assignment-operators" "^7.8.3"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
+    "@babel/plugin-syntax-numeric-separator" "^7.8.3"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
+    "@babel/plugin-syntax-top-level-await" "^7.8.3"
+
+babel-preset-jest@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-26.6.2.tgz#747872b1171df032252426586881d62d31798fee"
+  integrity sha512-YvdtlVm9t3k777c5NPQIv6cxFFFapys25HiUmuSgHwIZhfifweR5c5Sf5nwE3MAbfu327CYSvps8Yx6ANLyleQ==
+  dependencies:
+    babel-plugin-jest-hoist "^26.6.2"
+    babel-preset-current-node-syntax "^1.0.0"
+
 babel-runtime@6.x.x:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
@@ -8157,6 +8210,19 @@ base64-js@^1.3.1, base64-js@^1.5.1:
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
   integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
 
+base@^0.11.1:
+  version "0.11.2"
+  resolved "https://registry.yarnpkg.com/base/-/base-0.11.2.tgz#7bde5ced145b6d551a90db87f83c558b4eb48a8f"
+  integrity sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==
+  dependencies:
+    cache-base "^1.0.1"
+    class-utils "^0.3.5"
+    component-emitter "^1.2.1"
+    define-property "^1.0.0"
+    isobject "^3.0.1"
+    mixin-deep "^1.2.0"
+    pascalcase "^0.1.1"
+
 batch@0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/batch/-/batch-0.6.1.tgz#dc34314f4e679318093fc760272525f94bf25c16"
@@ -8188,6 +8254,13 @@ better-path-resolve@1.0.0:
   dependencies:
     is-windows "^1.0.0"
 
+better-react-mathjax@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/better-react-mathjax/-/better-react-mathjax-2.0.3.tgz#202dc6fe5c7263278f2491516f43f70ba188122f"
+  integrity sha512-wfifT8GFOKb1TWm2+E50I6DJpLZ5kLbch283Lu043EJtwSv0XvZDjr4YfR4d2MjAhqP6SH4VjjrKgbX8R00oCQ==
+  dependencies:
+    mathjax-full "^3.2.2"
+
 big-integer@^1.6.44:
   version "1.6.52"
   resolved "https://registry.yarnpkg.com/big-integer/-/big-integer-1.6.52.tgz#60a887f3047614a8e1bffe5d7173490a97dc8c85"
@@ -8203,6 +8276,11 @@ binary-extensions@^2.0.0:
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.3.0.tgz#f6e14a97858d327252200242d4ccfe522c445522"
   integrity sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==
 
+binaryextensions@^2.1.2:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/binaryextensions/-/binaryextensions-2.3.0.tgz#1d269cbf7e6243ea886aa41453c3651ccbe13c22"
+  integrity sha512-nAihlQsYGyc5Bwq6+EsubvANYGExeJKHDO3RjnvwU042fawQTQfM3Kxn7IHUXQOz4bzfwsGYYHGSvXyW4zOGLg==
+
 bl@^4.0.3, bl@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/bl/-/bl-4.1.0.tgz#451535264182bec2fbbc83a62ab98cf11d9f7b3a"
@@ -8317,6 +8395,22 @@ brace-expansion@^2.0.1:
   dependencies:
     balanced-match "^1.0.0"
 
+braces@^2.3.1:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/braces/-/braces-2.3.2.tgz#5979fd3f14cd531565e5fa2df1abfff1dfaee729"
+  integrity sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==
+  dependencies:
+    arr-flatten "^1.1.0"
+    array-unique "^0.3.2"
+    extend-shallow "^2.0.1"
+    fill-range "^4.0.0"
+    isobject "^3.0.1"
+    repeat-element "^1.1.2"
+    snapdragon "^0.8.1"
+    snapdragon-node "^2.0.1"
+    split-string "^3.0.2"
+    to-regex "^3.0.1"
+
 braces@^3.0.2, braces@^3.0.3, braces@~3.0.2:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789"
@@ -8336,6 +8430,11 @@ browser-assert@^1.2.1:
   resolved "https://registry.yarnpkg.com/browser-assert/-/browser-assert-1.2.1.tgz#9aaa5a2a8c74685c2ae05bfe46efd606f068c200"
   integrity sha512-nfulgvOR6S4gt9UKCeGJOuSGBPGiFT6oQ/2UBnvTY/5aQ1PnksW72fhZkM30DzoRRv2WpwZf1vHHEr3mtuXIWQ==
 
+browser-process-hrtime@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz#3c9b4b7d782c8121e56f10106d84c0d0ffc94626"
+  integrity sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==
+
 browser-stdout@1.3.1, browser-stdout@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/browser-stdout/-/browser-stdout-1.3.1.tgz#baa559ee14ced73452229bad7326467c61fabd60"
@@ -8368,21 +8467,36 @@ browserslist@^4.23.1:
     node-releases "^2.0.14"
     update-browserslist-db "^1.1.0"
 
-browserslist@^4.23.3:
-  version "4.23.3"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.23.3.tgz#debb029d3c93ebc97ffbc8d9cbb03403e227c800"
-  integrity sha512-btwCFJVjI4YWDNfau8RhZ+B1Q/VLoUITrm3RlP6y1tYGWIOa+InuYiRGXUBXo8nA1qKmHMyLB/iVQg5TT4eFoA==
+bser@2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/bser/-/bser-2.1.1.tgz#e6787da20ece9d07998533cfd9de6f5c38f4bc05"
+  integrity sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==
   dependencies:
-    caniuse-lite "^1.0.30001646"
-    electron-to-chromium "^1.5.4"
-    node-releases "^2.0.18"
-    update-browserslist-db "^1.1.0"
+    node-int64 "^0.4.0"
+
+buffer-alloc-unsafe@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz#bd7dc26ae2972d0eda253be061dba992349c19f0"
+  integrity sha512-TEM2iMIEQdJ2yjPJoSIsldnleVaAk1oW3DBVUykyOLsEsFmEc9kn+SFFPz+gl54KQNxlDnAwCXosOS9Okx2xAg==
+
+buffer-alloc@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/buffer-alloc/-/buffer-alloc-1.2.0.tgz#890dd90d923a873e08e10e5fd51a57e5b7cce0ec"
+  integrity sha512-CFsHQgjtW1UChdXgbyJGtnm+O/uLQeZdtbDo8mfUgYXCHSM1wgrVxXm6bSyrUuErEb+4sYVGCzASBRot7zyrow==
+  dependencies:
+    buffer-alloc-unsafe "^1.1.0"
+    buffer-fill "^1.0.0"
 
 buffer-crc32@~0.2.3:
   version "0.2.13"
   resolved "https://registry.yarnpkg.com/buffer-crc32/-/buffer-crc32-0.2.13.tgz#0d333e3f00eac50aa1454abd30ef8c2a5d9a7242"
   integrity sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==
 
+buffer-fill@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/buffer-fill/-/buffer-fill-1.0.0.tgz#f8f78b76789888ef39f205cd637f68e702122b2c"
+  integrity sha512-T7zexNBwiiaCOGDg9xNX9PBmjrubblRkENuptryuI64URkXDFum9il/JGL8Lm8wYfAXpredVXXZz7eMHilimiQ==
+
 buffer-from@^1.0.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
@@ -8411,6 +8525,13 @@ bufferutil@^4.0.1:
   dependencies:
     node-gyp-build "^4.3.0"
 
+bundle-require@^4.0.0:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/bundle-require/-/bundle-require-4.2.1.tgz#4c450a5807381d20ade987bde8ac391544257919"
+  integrity sha512-7Q/6vkyYAwOmQNRw75x+4yRtZCZJXUDmHHlFdkiV0wgv/reNjtJwpu1jPJ0w2kbEpIM0uoKI3S4/f39dU7AjSA==
+  dependencies:
+    load-tsconfig "^0.2.3"
+
 busboy@1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/busboy/-/busboy-1.6.0.tgz#966ea36a9502e43cdb9146962523b92f531f6893"
@@ -8445,11 +8566,26 @@ c8@^9.1.0:
     yargs "^17.7.2"
     yargs-parser "^21.1.1"
 
-cac@^6.7.14:
+cac@^6.7.12, cac@^6.7.14:
   version "6.7.14"
   resolved "https://registry.yarnpkg.com/cac/-/cac-6.7.14.tgz#804e1e6f506ee363cb0e3ccbb09cad5dd9870959"
   integrity sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==
 
+cache-base@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/cache-base/-/cache-base-1.0.1.tgz#0a7f46416831c8b662ee36fe4e7c59d76f666ab2"
+  integrity sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==
+  dependencies:
+    collection-visit "^1.0.0"
+    component-emitter "^1.2.1"
+    get-value "^2.0.6"
+    has-value "^1.0.0"
+    isobject "^3.0.1"
+    set-value "^2.0.0"
+    to-object-path "^0.3.0"
+    union-value "^1.0.0"
+    unset-value "^1.0.0"
+
 cacheable-lookup@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/cacheable-lookup/-/cacheable-lookup-7.0.0.tgz#3476a8215d046e5a3202a9209dd13fec1f933a27"
@@ -8484,6 +8620,11 @@ call-bind@^1.0.0, call-bind@^1.0.2, call-bind@^1.0.5, call-bind@^1.0.6, call-bin
     get-intrinsic "^1.2.4"
     set-function-length "^1.2.1"
 
+call-me-maybe@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/call-me-maybe/-/call-me-maybe-1.0.2.tgz#03f964f19522ba643b1b0693acb9152fe2074baa"
+  integrity sha512-HpX65o1Hnr9HH25ojC1YGs7HCQLq0GCOibSaWER0eNpgJ/Z1MZv2mTc7+xh6WOPxbRVcmgbv4hGU+uSQ/2xFZQ==
+
 callsites@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
@@ -8521,6 +8662,11 @@ camelcase@^7.0.1:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-7.0.1.tgz#f02e50af9fd7782bc8b88a3558c32fd3a388f048"
   integrity sha512-xlx1yCK2Oc1APsPXDL2LdlNP6+uu8OCDdhOBSVT279M/S+y75O30C2VuD8T2ogdePBBl7PfPF4504tnLgX3zfw==
 
+camelize@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.1.tgz#89b7e16884056331a35d6b5ad064332c91daa6c3"
+  integrity sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==
+
 caniuse-api@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0"
@@ -8541,10 +8687,17 @@ caniuse-lite@^1.0.30001640:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001643.tgz#9c004caef315de9452ab970c3da71085f8241dbd"
   integrity sha512-ERgWGNleEilSrHM6iUz/zJNSQTP8Mr21wDWpdgvRwcTXGAq6jMtOUPP4dqFPTdKqZ2wKTdtB+uucZ3MRpAUSmg==
 
-caniuse-lite@^1.0.30001646:
-  version "1.0.30001663"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001663.tgz#1529a723505e429fdfd49532e9fc42273ba7fed7"
-  integrity sha512-o9C3X27GLKbLeTYZ6HBOLU1tsAcBZsLis28wrVzddShCS16RujjHp9GDHKZqrB3meE0YjhawvMFsGb/igqiPzA==
+capture-exit@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4"
+  integrity sha512-PiT/hQmTonHhl/HFGN+Lx3JJUznrVYJ3+AQsnthneZbvW7x+f08Tk7yLJTLEOUvBTbduLeeBkxEaYXUOUrRq6g==
+  dependencies:
+    rsvp "^4.8.4"
+
+capture-stack-trace@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/capture-stack-trace/-/capture-stack-trace-1.0.2.tgz#1c43f6b059d4249e7f3f8724f15f048b927d3a8a"
+  integrity sha512-X/WM2UQs6VMHUtjUDnZTRI+i1crWteJySFzr9UpGoQa4WQffXVTTXuekjl7TjZRlcF2XfjgITT0HxZ9RnxeT0w==
 
 caseless@~0.12.0:
   version "0.12.0"
@@ -8574,7 +8727,18 @@ chalk@5.3.0, chalk@^5.0.0, chalk@^5.0.1, chalk@^5.2.0, chalk@^5.3.0:
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-5.3.0.tgz#67c20a7ebef70e7f3970a01f90fa210cb6860385"
   integrity sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==
 
-chalk@^2.1.0, chalk@^2.4.1, chalk@^2.4.2:
+chalk@^1.0.0:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
+  integrity sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==
+  dependencies:
+    ansi-styles "^2.2.1"
+    escape-string-regexp "^1.0.2"
+    has-ansi "^2.0.0"
+    strip-ansi "^3.0.0"
+    supports-color "^2.0.0"
+
+chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0, chalk@^2.4.1, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
   integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
@@ -8644,6 +8808,11 @@ character-reference-invalid@^2.0.0:
   resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz#85c66b041e43b47210faf401278abf808ac45cb9"
   integrity sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==
 
+chardet@^0.4.0:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.4.2.tgz#b5473b33dc97c424e5d98dc87d55d4d8a29c8bf2"
+  integrity sha512-j/Toj7f1z98Hh2cYo2BVr85EpIRWqUi7rtRSGxh/cqUjqrnJe9l9UE7IUGd2vQ2p+kSHLkSzObQPZPLUC6TQwg==
+
 chardet@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
@@ -8686,7 +8855,7 @@ cheerio@^1.0.0-rc.12:
     parse5 "^7.0.0"
     parse5-htmlparser2-tree-adapter "^7.0.0"
 
-"chokidar@>=3.0.0 <4.0.0", chokidar@^3.3.0, chokidar@^3.4.2, chokidar@^3.5.3, chokidar@^3.6.0:
+"chokidar@>=3.0.0 <4.0.0", chokidar@^3.4.2, chokidar@^3.5.1, chokidar@^3.5.3, chokidar@^3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b"
   integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
@@ -8721,6 +8890,11 @@ chrome-trace-event@^1.0.2:
   resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz#05bffd7ff928465093314708c93bdfa9bd1f0f5b"
   integrity sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==
 
+ci-info@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46"
+  integrity sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==
+
 ci-info@^3.1.0, ci-info@^3.2.0, ci-info@^3.7.0:
   version "3.9.0"
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.9.0.tgz#4279a62028a7b1f262f3473fc9605f5e218c59b4"
@@ -8748,12 +8922,32 @@ citty@^0.1.6:
   dependencies:
     consola "^3.2.3"
 
+cjs-module-lexer@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-0.6.0.tgz#4186fcca0eae175970aee870b9fe2d6cf8d5655f"
+  integrity sha512-uc2Vix1frTfnuzxxu1Hp4ktSvM3QaI4oXl4ZUqL1wjTu/BGki9TrCWoqLTg/drR1KwAEarXuRFCG2Svr1GxPFw==
+
+class-utils@^0.3.5:
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463"
+  integrity sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==
+  dependencies:
+    arr-union "^3.1.0"
+    define-property "^0.2.5"
+    isobject "^3.0.0"
+    static-extend "^0.1.1"
+
 classcat@^5.0.3, classcat@^5.0.4:
   version "5.0.5"
   resolved "https://registry.yarnpkg.com/classcat/-/classcat-5.0.5.tgz#8c209f359a93ac302404a10161b501eba9c09c77"
   integrity sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w==
 
-classnames@2.x, classnames@^2.2.1, classnames@^2.2.6, classnames@^2.3.2, classnames@^2.5.1:
+classnames@2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
+  integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
+
+classnames@2.x, classnames@^2.2.1, classnames@^2.2.6, classnames@^2.3.1, classnames@^2.3.2, classnames@^2.5.1:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
   integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
@@ -8765,21 +8959,28 @@ clean-css@^5.2.2, clean-css@^5.3.2, clean-css@~5.3.2:
   dependencies:
     source-map "~0.6.0"
 
-clean-set@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/clean-set/-/clean-set-1.1.2.tgz#76d8bf238c3e27827bfa73073ecdfdc767187070"
-  integrity sha512-cA8uCj0qSoG9e0kevyOWXwPaELRPVg5Pxp6WskLMwerx257Zfnh8Nl0JBH59d7wQzij2CK7qEfJQK3RjuKKIug==
-
 clean-stack@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
   integrity sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==
 
+cli-boxes@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-1.0.0.tgz#4fa917c3e59c94a004cd61f8ee509da651687143"
+  integrity sha512-3Fo5wu8Ytle8q9iCzS4D2MWVL2X7JVWRiS1BnXbTFDhS9c/REkM9vd1AmabsoZoY5/dGi5TT9iKL8Kb6DeBRQg==
+
 cli-boxes@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-3.0.0.tgz#71a10c716feeba005e4504f36329ef0b17cf3145"
   integrity sha512-/lzGpEWL/8PfI0BmBOPRwp0c/wFNX1RdUML3jK/RcSBA9T8mZDdQpqYBKtCFTOfQbwPqWEOpjqW+Fnayc0969g==
 
+cli-cursor@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-2.1.0.tgz#b35dac376479facc3e94747d41d0d0f5238ffcb5"
+  integrity sha512-8lgKz8LmCRYZZQDpRyT2m5rKJ08TnU4tR9FFFW2rxpxR1FzWi4PQ/NfyODchAatHaUgnSPVcx/R5w6NuTBzFiw==
+  dependencies:
+    restore-cursor "^2.0.0"
+
 cli-cursor@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-3.1.0.tgz#264305a7ae490d1d03bf0c9ba7c925d1753af307"
@@ -8808,6 +9009,13 @@ cli-table3@^0.6.1, cli-table3@^0.6.3, cli-table3@~0.6.1:
   optionalDependencies:
     "@colors/colors" "1.5.0"
 
+cli-table@^0.3.1:
+  version "0.3.11"
+  resolved "https://registry.yarnpkg.com/cli-table/-/cli-table-0.3.11.tgz#ac69cdecbe81dccdba4889b9a18b7da312a9d3ee"
+  integrity sha512-IqLQi4lO0nIB4tcdTpN4LCB9FI3uqrJZK7RC515EnhZ6qBaglkIgICb1wjeAqpdoOabm1+SuQtkXIPdYC93jhQ==
+  dependencies:
+    colors "1.0.3"
+
 cli-truncate@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/cli-truncate/-/cli-truncate-2.1.0.tgz#c39e28bf05edcde5be3b98992a22deed5a2b93c7"
@@ -8824,6 +9032,16 @@ cli-truncate@^3.1.0:
     slice-ansi "^5.0.0"
     string-width "^5.0.0"
 
+cli-width@^2.0.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.1.tgz#b0433d0b4e9c847ef18868a4ef16fd5fc8271c48"
+  integrity sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw==
+
+cli-width@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-3.0.0.tgz#a2f48437a2caa9a22436e794bf071ec9e61cedf6"
+  integrity sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==
+
 client-only@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
@@ -8856,6 +9074,11 @@ cliui@^8.0.1:
     strip-ansi "^6.0.1"
     wrap-ansi "^7.0.0"
 
+clone-buffer@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/clone-buffer/-/clone-buffer-1.0.0.tgz#e3e25b207ac4e701af721e2cb5a16792cac3dc58"
+  integrity sha512-KLLTJWrvwIP+OPfMn0x2PheDEP20RPUcGXj/ERegTgdmPEZylALQldygiqrPPu8P45uNuPs7ckmReLY6v/iA5g==
+
 clone-deep@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-4.0.1.tgz#c19fd9bdbbf85942b4fd979c84dcf7d5f07c2387"
@@ -8865,17 +9088,36 @@ clone-deep@^4.0.1:
     kind-of "^6.0.2"
     shallow-clone "^3.0.0"
 
+clone-stats@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/clone-stats/-/clone-stats-1.0.0.tgz#b3782dff8bb5474e18b9b6bf0fdfe782f8777680"
+  integrity sha512-au6ydSpg6nsrigcZ4m8Bc9hxjeW+GJ8xh5G3BJCMt4WXe1H10UNaVOamqQTmrx1kjVuxAHIQSNU6hY4Nsn9/ag==
+
 clone@^1.0.2:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==
 
-clsx@^1.0.4, clsx@^1.2.1:
+clone@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
+  integrity sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==
+
+cloneable-readable@^1.0.0:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/cloneable-readable/-/cloneable-readable-1.1.3.tgz#120a00cb053bfb63a222e709f9683ea2e11d8cec"
+  integrity sha512-2EF8zTQOxYq70Y4XKtorQupqF0m49MBz2/yf5Bj+MHjvpG3Hy7sImifnqD6UA+TKYxeSV+u6qqQPawN5UvnpKQ==
+  dependencies:
+    inherits "^2.0.1"
+    process-nextick-args "^2.0.0"
+    readable-stream "^2.3.5"
+
+clsx@^1.0.4, clsx@^1.1.0, clsx@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
   integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
 
-clsx@^2.0.0, clsx@^2.1.1:
+clsx@^2.0.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
   integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
@@ -8887,6 +9129,11 @@ cmdk@^0.2.0:
   dependencies:
     "@radix-ui/react-dialog" "1.0.0"
 
+co@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
+  integrity sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==
+
 code-point-at@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
@@ -8897,6 +9144,19 @@ collapse-white-space@^2.0.0:
   resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-2.1.0.tgz#640257174f9f42c740b40f3b55ee752924feefca"
   integrity sha512-loKTxY1zCOuG4j9f6EPnuyyYkf58RnhhWTvRoZEokgB+WbdXehfjFviyOVYkqzEWz1Q5kRiZdBYS5SwxbQYwzw==
 
+collect-v8-coverage@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/collect-v8-coverage/-/collect-v8-coverage-1.0.2.tgz#c0b29bcd33bcd0779a1344c2136051e6afd3d9e9"
+  integrity sha512-lHl4d5/ONEbLlJvaJNtsF/Lz+WvB07u2ycqTYbdrq7UypDXailES4valYb2eWiJFxZlVmpGekfqoxQhzyFdT4Q==
+
+collection-visit@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
+  integrity sha512-lNkKvzEeMBBjUGHZ+q6z9pSJla0KWAQPvtzhEV9+iGyQYG+pBpl7xKDhxoNSOZH2hhv0v5k0y2yAM4o4SjoSkw==
+  dependencies:
+    map-visit "^1.0.0"
+    object-visit "^1.0.0"
+
 color-blind-esm@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/color-blind-esm/-/color-blind-esm-0.1.4.tgz#a965319e260ad8966fc86225681ce648328016bc"
@@ -8936,6 +9196,11 @@ color-string@^1.6.0:
     color-name "^1.0.0"
     simple-swizzle "^0.2.2"
 
+color2k@^2.0.1:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/color2k/-/color2k-2.0.3.tgz#a771244f6b6285541c82aa65ff0a0c624046e533"
+  integrity sha512-zW190nQTIoXcGCaU08DvVNFTmQhUpnJfVuAKfWqUQkflXKpaDdpaYoM0iluLS9lgJNHyBF58KKA2FBEwkD7wog==
+
 color@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/color/-/color-3.2.1.tgz#3544dc198caf4490c3ecc9a790b54fe9ff45e164"
@@ -8949,6 +9214,11 @@ colord@^2.9.3:
   resolved "https://registry.yarnpkg.com/colord/-/colord-2.9.3.tgz#4f8ce919de456f1d5c1c368c307fe20f3e59fb43"
   integrity sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==
 
+colorette@^1.2.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.4.0.tgz#5190fbb87276259a86ad700bff2c6d6faa3fca40"
+  integrity sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g==
+
 colorette@^2.0.10, colorette@^2.0.16, colorette@^2.0.19, colorette@^2.0.20:
   version "2.0.20"
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.20.tgz#9eb793e6833067f7235902fcd3b09917a000a95a"
@@ -8969,6 +9239,11 @@ colorparsley@^0.1.8:
   resolved "https://registry.yarnpkg.com/colorparsley/-/colorparsley-0.1.8.tgz#fd5c1b3d2befbc08c4ab73dc5c2c88f72f743132"
   integrity sha512-rObESTTTE6G5qO5WFwFxWPggpw4KfpxnLC6Ssl8bITBnNVRhDsyCeTRAUxWQNVTx2pRknKlO2nddYTxjkdNFaw==
 
+colors@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/colors/-/colors-1.0.3.tgz#0433f44d809680fdeb60ed260f1b0c262e82a40b"
+  integrity sha512-pFGrxThWcWQ2MsAz6RtgeWe4NK2kUE1WfsrvvlctdII745EW9I0yflqhe7++M5LEc7bV2c/9/5zc8sFcpL0Drw==
+
 combine-promises@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/combine-promises/-/combine-promises-1.2.0.tgz#5f2e68451862acf85761ded4d9e2af7769c2ca6a"
@@ -9006,6 +9281,11 @@ commander@7, commander@^7.2.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
   integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
 
+commander@9.2.0:
+  version "9.2.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-9.2.0.tgz#6e21014b2ed90d8b7c9647230d8b7a94a4a419a9"
+  integrity sha512-e2i4wANQiSXgnrBlIatyHtP1odfUp0BbV5Y5nEGbxtIrStkEOAAzCUirvLBNXHLr7kwLvJl6V+4V3XV9x7Wd9w==
+
 commander@^10.0.0:
   version "10.0.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-10.0.1.tgz#881ee46b4f77d1c1dccc5823433aa39b022cbe06"
@@ -9021,6 +9301,11 @@ commander@^2.1.0, commander@^2.20.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
 
+commander@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
+  integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
+
 commander@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae"
@@ -9056,10 +9341,10 @@ compare-versions@^6.1.0:
   resolved "https://registry.yarnpkg.com/compare-versions/-/compare-versions-6.1.0.tgz#3f2131e3ae93577df111dba133e6db876ffe127a"
   integrity sha512-LNZQXhqUvqUTotpZ00qLSaify3b4VFD588aRr8MKFw4CMUr98ytzCW5wDH5qx/DEY5kCDXcbcRuCqL0szEf2tg==
 
-component-emitter@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-2.0.0.tgz#3a137dfe66fcf2efe3eab7cb7d5f51741b3620c6"
-  integrity sha512-4m5s3Me2xxlVKG9PkZpQqHQR7bgpnN7joDMJ4yvVkVXngjoITG76IaZmzmywSeRTeTpc6N6r3H3+KyUurV8OYw==
+component-emitter@^1.2.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.3.1.tgz#ef1d5796f7d93f135ee6fb684340b26403c97d17"
+  integrity sha512-T0+barUSQRTUQASh8bx02dl+DhF54GtIDY13Y3m9oWTklKbb3Wv974meRpeZ3lp1JpLVECWWNHC4vaG2XHXouQ==
 
 compressible@~2.0.16:
   version "2.0.18"
@@ -9091,19 +9376,6 @@ concat-map@0.0.1:
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
   integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
 
-concurrently@^9.1.0:
-  version "9.1.0"
-  resolved "https://registry.yarnpkg.com/concurrently/-/concurrently-9.1.0.tgz#8da6d609f4321752912dab9be8710232ac496aa0"
-  integrity sha512-VxkzwMAn4LP7WyMnJNbHN5mKV9L2IbyDjpzemKr99sXNR3GqRNMMHdm7prV1ws9wg7ETj6WUkNOigZVsptwbgg==
-  dependencies:
-    chalk "^4.1.2"
-    lodash "^4.17.21"
-    rxjs "^7.8.1"
-    shell-quote "^1.8.1"
-    supports-color "^8.1.1"
-    tree-kill "^1.2.2"
-    yargs "^17.7.2"
-
 confbox@^0.1.7:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/confbox/-/confbox-0.1.7.tgz#ccfc0a2bcae36a84838e83a3b7f770fb17d6c579"
@@ -9165,6 +9437,11 @@ content-type@~1.0.4, content-type@~1.0.5:
   resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.5.tgz#8b773162656d1d1086784c8f23a54ce6d73d7918"
   integrity sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==
 
+convert-source-map@^1.4.0, convert-source-map@^1.6.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
+  integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==
+
 convert-source-map@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-2.0.0.tgz#4b560f649fc4e918dd0ab75cf4961e8bc882d82a"
@@ -9180,10 +9457,10 @@ cookie@0.6.0, cookie@~0.6.0:
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.6.0.tgz#2798b04b071b0ecbff0dbb62a505a8efa4e19051"
   integrity sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==
 
-cookie@0.7.1:
-  version "0.7.1"
-  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.7.1.tgz#2f73c42142d5d5cf71310a74fc4ae61670e5dbc9"
-  integrity sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==
+copy-descriptor@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
+  integrity sha512-XgZ0pFcakEUlbwQEVNg3+QAis1FyTL3Qel9FYy8pSkQqoG3PNoT0bOCQtOXcOkur21r2Eq2kI+IE+gsmAEVlYw==
 
 copy-text-to-clipboard@^3.2.0:
   version "3.2.0"
@@ -9269,16 +9546,18 @@ cosmiconfig@^8.1.3, cosmiconfig@^8.3.5:
     parse-json "^5.2.0"
     path-type "^4.0.0"
 
+create-error-class@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/create-error-class/-/create-error-class-3.0.2.tgz#06be7abef947a3f14a30fd610671d401bca8b7b6"
+  integrity sha512-gYTKKexFO3kh200H1Nit76sRwRtOY32vQd3jpAQKpLtZqyNsSQNfI4N7o3eP2wUjV35pTWKRYqFUDBvUha/Pkw==
+  dependencies:
+    capture-stack-trace "^1.0.0"
+
 create-require@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/create-require/-/create-require-1.1.1.tgz#c1d7e8f1e5f6cfc9ff65f9cd352d37348756c333"
   integrity sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==
 
-crelt@^1.0.5:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/crelt/-/crelt-1.0.6.tgz#7cc898ea74e190fb6ef9dae57f8f81cf7302df72"
-  integrity sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==
-
 critters@0.0.16:
   version "0.0.16"
   resolved "https://registry.yarnpkg.com/critters/-/critters-0.0.16.tgz#ffa2c5561a65b43c53b940036237ce72dcebfe93"
@@ -9307,7 +9586,7 @@ cross-spawn@^5.1.0:
     shebang-command "^1.2.0"
     which "^1.2.9"
 
-cross-spawn@^6.0.5:
+cross-spawn@^6.0.0, cross-spawn@^6.0.5:
   version "6.0.5"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
   integrity sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==
@@ -9334,27 +9613,16 @@ crypto-random-string@^4.0.0:
   dependencies:
     type-fest "^1.0.1"
 
-css-blank-pseudo@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/css-blank-pseudo/-/css-blank-pseudo-7.0.0.tgz#6069ac242aab6a4d52aabbd0287846080ac8e2d9"
-  integrity sha512-v9xXYGdm6LIn4iHEfu3egk/PM1g/yJr8uwTIj6E44kurv5dE/4y3QW7WdVmZ0PVnqfTuK+C0ClZcEEiaKWBL9Q==
-  dependencies:
-    postcss-selector-parser "^6.1.0"
+css-color-keywords@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
+  integrity sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==
 
 css-declaration-sorter@^7.2.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/css-declaration-sorter/-/css-declaration-sorter-7.2.0.tgz#6dec1c9523bc4a643e088aab8f09e67a54961024"
   integrity sha512-h70rUM+3PNFuaBDTLe8wF/cdWu+dOZmb7pJt8Z2sedYbAcQVQV/tEchueg3GWxwqS0cxtbxmaHEdkNACqcvsow==
 
-css-has-pseudo@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/css-has-pseudo/-/css-has-pseudo-7.0.0.tgz#f07f41ba7b55859ee27b0520888c3e21afe97ebc"
-  integrity sha512-vO6k9bBt4/eEZ2PeHmS2VXjJga5SBy6O1ESyaOkse5/lvp6piFqg8Sh5KTU7X33M7Uh/oqo+M3EeMktQrZoTCQ==
-  dependencies:
-    "@csstools/selector-specificity" "^4.0.0"
-    postcss-selector-parser "^6.1.0"
-    postcss-value-parser "^4.2.0"
-
 css-in-js-utils@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/css-in-js-utils/-/css-in-js-utils-3.1.0.tgz#640ae6a33646d401fc720c54fc61c42cd76ae2bb"
@@ -9388,11 +9656,6 @@ css-minimizer-webpack-plugin@^5.0.1:
     schema-utils "^4.0.1"
     serialize-javascript "^6.0.1"
 
-css-prefers-color-scheme@^10.0.0:
-  version "10.0.0"
-  resolved "https://registry.yarnpkg.com/css-prefers-color-scheme/-/css-prefers-color-scheme-10.0.0.tgz#ba001b99b8105b8896ca26fc38309ddb2278bd3c"
-  integrity sha512-VCtXZAWivRglTZditUfB4StnsWr6YVZ2PRtuxQLKTNRdtAf8tpzaVPE9zXIF3VaSc7O70iK/j1+NXxyQCqdPjQ==
-
 css-select@^4.1.3, css-select@^4.2.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/css-select/-/css-select-4.3.0.tgz#db7129b2846662fd8628cfc496abb2b59e41529b"
@@ -9420,6 +9683,15 @@ css-selector-parser@^3.0.0:
   resolved "https://registry.yarnpkg.com/css-selector-parser/-/css-selector-parser-3.0.5.tgz#9b636ebccf7c4bcce5c1ac21ae27de9f01180ae9"
   integrity sha512-3itoDFbKUNx1eKmVpYMFyqKX04Ww9osZ+dLgrk6GEv6KMVeXUhUnp4I5X+evw+u3ZxVU6RFXSSRxlTeMh8bA+g==
 
+css-to-react-native@3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.2.0.tgz#cdd8099f71024e149e4f6fe17a7d46ecd55f1e32"
+  integrity sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==
+  dependencies:
+    camelize "^1.0.0"
+    css-color-keywords "^1.0.0"
+    postcss-value-parser "^4.0.2"
+
 css-tree@^1.1.2:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d"
@@ -9454,11 +9726,6 @@ css.escape@1.5.1, css.escape@^1.5.1:
   resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
   integrity sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==
 
-cssdb@^8.1.1:
-  version "8.1.1"
-  resolved "https://registry.yarnpkg.com/cssdb/-/cssdb-8.1.1.tgz#bb3ea0038a471c61fc89c56d11d168d62fac7829"
-  integrity sha512-kRbSRgZoxtZNl5snb3nOzBkFOt5AwnephcUTIEFc2DebKG9PN50/cHarlwOooTxYQ/gxsnKs3BxykhNLmfvyLg==
-
 cssesc@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
@@ -9513,52 +9780,11 @@ cssnano-preset-default@^6.1.2:
     postcss-svgo "^6.0.3"
     postcss-unique-selectors "^6.0.4"
 
-cssnano-preset-default@^7.0.6:
-  version "7.0.6"
-  resolved "https://registry.yarnpkg.com/cssnano-preset-default/-/cssnano-preset-default-7.0.6.tgz#0220fa7507478369aa2a226bac03e1204cd024c1"
-  integrity sha512-ZzrgYupYxEvdGGuqL+JKOY70s7+saoNlHSCK/OGn1vB2pQK8KSET8jvenzItcY+kA7NoWvfbb/YhlzuzNKjOhQ==
-  dependencies:
-    browserslist "^4.23.3"
-    css-declaration-sorter "^7.2.0"
-    cssnano-utils "^5.0.0"
-    postcss-calc "^10.0.2"
-    postcss-colormin "^7.0.2"
-    postcss-convert-values "^7.0.4"
-    postcss-discard-comments "^7.0.3"
-    postcss-discard-duplicates "^7.0.1"
-    postcss-discard-empty "^7.0.0"
-    postcss-discard-overridden "^7.0.0"
-    postcss-merge-longhand "^7.0.4"
-    postcss-merge-rules "^7.0.4"
-    postcss-minify-font-values "^7.0.0"
-    postcss-minify-gradients "^7.0.0"
-    postcss-minify-params "^7.0.2"
-    postcss-minify-selectors "^7.0.4"
-    postcss-normalize-charset "^7.0.0"
-    postcss-normalize-display-values "^7.0.0"
-    postcss-normalize-positions "^7.0.0"
-    postcss-normalize-repeat-style "^7.0.0"
-    postcss-normalize-string "^7.0.0"
-    postcss-normalize-timing-functions "^7.0.0"
-    postcss-normalize-unicode "^7.0.2"
-    postcss-normalize-url "^7.0.0"
-    postcss-normalize-whitespace "^7.0.0"
-    postcss-ordered-values "^7.0.1"
-    postcss-reduce-initial "^7.0.2"
-    postcss-reduce-transforms "^7.0.0"
-    postcss-svgo "^7.0.1"
-    postcss-unique-selectors "^7.0.3"
-
 cssnano-utils@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/cssnano-utils/-/cssnano-utils-4.0.2.tgz#56f61c126cd0f11f2eef1596239d730d9fceff3c"
   integrity sha512-ZR1jHg+wZ8o4c3zqf1SIUSTIvm/9mU343FMR6Obe/unskbvpGhZOo1J6d/r8D1pzkRQYuwbcH3hToOuoA2G7oQ==
 
-cssnano-utils@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/cssnano-utils/-/cssnano-utils-5.0.0.tgz#b53a0343dd5d21012911882db6ae7d2eae0e3687"
-  integrity sha512-Uij0Xdxc24L6SirFr25MlwC2rCFX6scyUmuKpzI+JQ7cyqDEwD42fJ0xfB3yLfOnRDU5LKGgjQ9FA6LYh76GWQ==
-
 cssnano@^6.0.1, cssnano@^6.1.2:
   version "6.1.2"
   resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-6.1.2.tgz#4bd19e505bd37ee7cf0dc902d3d869f6d79c66b8"
@@ -9567,14 +9793,6 @@ cssnano@^6.0.1, cssnano@^6.1.2:
     cssnano-preset-default "^6.1.2"
     lilconfig "^3.1.1"
 
-cssnano@^7.0.6:
-  version "7.0.6"
-  resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-7.0.6.tgz#63d54fd42bc017f6aaed69e47d9aaef85b7850ec"
-  integrity sha512-54woqx8SCbp8HwvNZYn68ZFAepuouZW4lTwiMVnBErM3VkO7/Sd4oTOt3Zz3bPx3kxQ36aISppyXj2Md4lg8bw==
-  dependencies:
-    cssnano-preset-default "^7.0.6"
-    lilconfig "^3.1.2"
-
 csso@^5.0.5:
   version "5.0.5"
   resolved "https://registry.yarnpkg.com/csso/-/csso-5.0.5.tgz#f9b7fe6cc6ac0b7d90781bb16d5e9874303e2ca6"
@@ -9582,7 +9800,24 @@ csso@^5.0.5:
   dependencies:
     css-tree "~2.2.0"
 
-csstype@^3.0.10, csstype@^3.0.2, csstype@^3.1.2:
+cssom@^0.4.4:
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.4.4.tgz#5a66cf93d2d0b661d80bf6a44fb65f5c2e4e0a10"
+  integrity sha512-p3pvU7r1MyyqbTk+WbNJIgJjG2VmTIaB10rI93LzVPrmDJKkzKYMtxxyAvQXR/NS6otuzveI7+7BBq3SjBS2mw==
+
+cssom@~0.3.6:
+  version "0.3.8"
+  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.8.tgz#9f1276f5b2b463f2114d3f2c75250af8c1a36f4a"
+  integrity sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==
+
+cssstyle@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-2.3.0.tgz#ff665a0ddbdc31864b09647f34163443d90b0852"
+  integrity sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==
+  dependencies:
+    cssom "~0.3.6"
+
+csstype@3.1.3, csstype@^3.0.10, csstype@^3.0.2, csstype@^3.1.2:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
   integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
@@ -9974,6 +10209,16 @@ dagre@^0.8.5:
     graphlib "^2.1.8"
     lodash "^4.17.15"
 
+dargs@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/dargs/-/dargs-5.1.0.tgz#ec7ea50c78564cd36c9d5ec18f66329fade27829"
+  integrity sha512-Mr5OxT76pdJv7BbLq3hF1gSP8zxlCyDA1afj2Iab2MPKmdAKV+aKGC8YJv6cT8ItdFXAf798JJQD7jmbWZcYTQ==
+
+dargs@^6.0.0, dargs@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/dargs/-/dargs-6.1.0.tgz#1f3b9b56393ecf8caa7cbfd6c31496ffcfb9b272"
+  integrity sha512-5dVBvpBLBnPwSsYXqfybFyehMmC/EenKEcf23AhCTgTf48JFBbmJKqoZBsERDnjL0FyiVTYWdFsRfTLHxLyKdQ==
+
 dashdash@^1.12.0:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
@@ -9981,6 +10226,15 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"
 
+data-urls@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-2.0.0.tgz#156485a72963a970f5d5821aaf642bef2bf2db9b"
+  integrity sha512-X5eWTSXO/BJmpdIKCRuKUgSCgAN0OwliVK3yPKbwIWU1Tdw5BRajxlzMidvh+gwko9AfQ9zIj52pzF91Q3YAvQ==
+  dependencies:
+    abab "^2.0.3"
+    whatwg-mimetype "^2.3.0"
+    whatwg-url "^8.0.0"
+
 data-view-buffer@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/data-view-buffer/-/data-view-buffer-1.0.1.tgz#8ea6326efec17a2e42620696e671d7d5a8bc66b2"
@@ -10008,6 +10262,11 @@ data-view-byte-offset@^1.0.0:
     es-errors "^1.3.0"
     is-data-view "^1.0.1"
 
+dateformat@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"
+  integrity sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==
+
 dayjs@^1.10.4, dayjs@^1.11.7:
   version "1.11.11"
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.11.tgz#dfe0e9d54c5f8b68ccf8ca5f72ac603e7e5ed59e"
@@ -10018,7 +10277,7 @@ debounce@^1.2.1:
   resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.1.tgz#38881d8f4166a5c5848020c11827b834bcb3e0a5"
   integrity sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==
 
-debug@2.6.9, debug@^2.2.0, debug@^2.6.0:
+debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
   integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
@@ -10071,6 +10330,16 @@ decamelize@^4.0.0:
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-4.0.0.tgz#aa472d7bf660eb15f3494efd531cab7f2a709837"
   integrity sha512-9iE1PgSik9HeIIw2JO94IidnE3eBoQrFJ3w7sFuzSX4DpmZ3v5sZpUiV5Swcf6mQEF+Y0ru8Neo+p+nyh2J+hQ==
 
+decimal.js@^10.2.1:
+  version "10.4.3"
+  resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.4.3.tgz#1044092884d245d1b7f65725fa4ad4c6f781cc23"
+  integrity sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==
+
+decko@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/decko/-/decko-1.2.0.tgz#fd43c735e967b8013306884a56fbe665996b6817"
+  integrity sha512-m8FnyHXV1QX+S1cl+KPFDIl6NMkxtKsy6+U/aYyjrOqWMuwAwYWu7ePqrsUHtDR5Y8Yk2pi/KIDSgF+vT4cPOQ==
+
 decode-named-character-reference@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/decode-named-character-reference/-/decode-named-character-reference-1.0.2.tgz#daabac9690874c394c81e4162a0304b35d824f0e"
@@ -10078,6 +10347,18 @@ decode-named-character-reference@^1.0.0:
   dependencies:
     character-entities "^2.0.0"
 
+decode-uri-component@^0.2.0:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.2.tgz#e69dbe25d37941171dd540e024c444cd5188e1e9"
+  integrity sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==
+
+decompress-response@^3.2.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/decompress-response/-/decompress-response-3.3.0.tgz#80a4dd323748384bfa248083622aedec982adff3"
+  integrity sha512-BzRPQuY1ip+qDonAOz42gRm/pg9F768C+npV/4JOsxRC2sq+Rlk+Q4ZCAsOhnIaMrgarILY+RMUIvMmmX1qAEA==
+  dependencies:
+    mimic-response "^1.0.0"
+
 decompress-response@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/decompress-response/-/decompress-response-6.0.0.tgz#ca387612ddb7e104bd16d85aab00d5ecf09c66fc"
@@ -10131,11 +10412,6 @@ deep-is@^0.1.3:
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
   integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
 
-deepmerge-ts@^7.0.3:
-  version "7.1.3"
-  resolved "https://registry.yarnpkg.com/deepmerge-ts/-/deepmerge-ts-7.1.3.tgz#9a07e5e7dff7afa8ddf48b90b7161ca9439ca4ca"
-  integrity sha512-qCSH6I0INPxd9Y1VtAiLpnYvz5O//6rCfJXKk0z66Up9/VOSr+1yS8XSKA5IWRxjocFGlzPyaZYe+jxq7OOLtQ==
-
 deepmerge@^4.2.2, deepmerge@^4.3.1, deepmerge@~4.3.0:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
@@ -10191,6 +10467,28 @@ define-properties@^1.1.3, define-properties@^1.2.0, define-properties@^1.2.1:
     has-property-descriptors "^1.0.0"
     object-keys "^1.1.1"
 
+define-property@^0.2.5:
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/define-property/-/define-property-0.2.5.tgz#c35b1ef918ec3c990f9a5bc57be04aacec5c8116"
+  integrity sha512-Rr7ADjQZenceVOAKop6ALkkRAmH1A4Gx9hV/7ZujPUN2rkATqFO0JZLZInbAjpZYoJ1gUx8MRMQVkYemcbMSTA==
+  dependencies:
+    is-descriptor "^0.1.0"
+
+define-property@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/define-property/-/define-property-1.0.0.tgz#769ebaaf3f4a63aad3af9e8d304c9bbe79bfb0e6"
+  integrity sha512-cZTYKFWspt9jZsMscWo8sc/5lbPC9Q0N5nBLgb+Yd915iL3udB1uFgS3B8YCx66UVHq018DAVFoee7x+gxggeA==
+  dependencies:
+    is-descriptor "^1.0.0"
+
+define-property@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/define-property/-/define-property-2.0.2.tgz#d459689e8d654ba77e02a817f8710d702cb16e9d"
+  integrity sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==
+  dependencies:
+    is-descriptor "^1.0.2"
+    isobject "^3.0.1"
+
 defu@^6.1.4:
   version "6.1.4"
   resolved "https://registry.yarnpkg.com/defu/-/defu-6.1.4.tgz#4e0c9cf9ff68fe5f3d7f2765cc1a012dfdcb0479"
@@ -10237,11 +10535,6 @@ depd@~1.1.2:
   resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
   integrity sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==
 
-dependency-graph@^0.11.0:
-  version "0.11.0"
-  resolved "https://registry.yarnpkg.com/dependency-graph/-/dependency-graph-0.11.0.tgz#ac0ce7ed68a54da22165a85e97a01d53f5eb2e27"
-  integrity sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg==
-
 dequal@^2.0.0, dequal@^2.0.2, dequal@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be"
@@ -10252,6 +10545,11 @@ destroy@1.2.0:
   resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.2.0.tgz#4803735509ad8be552934c67df614f94e66fa015"
   integrity sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==
 
+detect-conflict@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/detect-conflict/-/detect-conflict-1.0.1.tgz#088657a66a961c05019db7c4230883b1c6b4176e"
+  integrity sha512-AD1QARAKN95aIqOmob+HhpctYTzCbpXG1Nfc+xrxlh3j54YGd1ikIGqsGIHAB7Hjomz8iZy0sI4Mtzs66kH8Dg==
+
 detect-indent@^6.0.0, detect-indent@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-6.1.0.tgz#592485ebbbf6b3b1ab2be175c8393d04ca0d57e6"
@@ -10267,6 +10565,11 @@ detect-libc@^2.0.0:
   resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-2.0.3.tgz#f0cd503b40f9939b894697d19ad50895e30cf700"
   integrity sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==
 
+detect-newline@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
+  integrity sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==
+
 detect-node-es@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/detect-node-es/-/detect-node-es-1.1.0.tgz#163acdf643330caa0b4cd7c21e7ee7755d6fa493"
@@ -10307,12 +10610,17 @@ devlop@^1.0.0, devlop@^1.1.0:
   dependencies:
     dequal "^2.0.0"
 
+diff-sequences@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-26.6.2.tgz#48ba99157de1923412eed41db6b6d4aa9ca7c0b1"
+  integrity sha512-Mv/TDa3nZ9sbc5soK+OoA74BsS3mL37yixCvUAQkiuA4Wz6YtwP/K47n2rv2ovzHZvoiQeA5FTQOschKkEwB0Q==
+
 diff-sequences@^29.6.3:
   version "29.6.3"
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-29.6.3.tgz#4deaf894d11407c51efc8418012f9e70b84ea921"
   integrity sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==
 
-diff@3.5.0:
+diff@3.5.0, diff@^3.5.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
   integrity sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==
@@ -10327,6 +10635,21 @@ diff@^5.0.0, diff@^5.2.0:
   resolved "https://registry.yarnpkg.com/diff/-/diff-5.2.0.tgz#26ded047cd1179b78b9537d5ef725503ce1ae531"
   integrity sha512-uIFDxqpRZGZ6ThOk84hEfqWoHx2devRFvpTZcTHur85vImfaxUbTW9Ryh4CpCuDnToOP1CEtXKIgytHBPVff5A==
 
+dir-glob@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-2.0.0.tgz#0b205d2b6aef98238ca286598a8204d29d0a0034"
+  integrity sha512-37qirFDz8cA5fimp9feo43fSuRo2gHwaIn6dXL8Ber1dGwUosDrGZeCCXq57WnIqE4aQ+u3eQZzsk1yOzhdwag==
+  dependencies:
+    arrify "^1.0.1"
+    path-type "^3.0.0"
+
+dir-glob@^2.0.0, dir-glob@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-2.2.2.tgz#fa09f0694153c8918b18ba0deafae94769fc50c4"
+  integrity sha512-f9LBi5QWzIW3I6e//uxZoLBlUt9kcp66qo0sSCxL6YZKc75R1c4MFCoe/LaZiBGmgujvQdxc5Bn3QhfyvK5Hsw==
+  dependencies:
+    path-type "^3.0.0"
+
 dir-glob@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f"
@@ -10339,20 +10662,6 @@ direction@^2.0.0:
   resolved "https://registry.yarnpkg.com/direction/-/direction-2.0.1.tgz#71800dd3c4fa102406502905d3866e65bdebb985"
   integrity sha512-9S6m9Sukh1cZNknO1CWAr2QAWsbKLafQiyM5gZ7VgXHeuaoUwffKN4q6NC4A/Mf9iiPlOXQEKW/Mv/mh9/3YFA==
 
-dnd-core@^16.0.1:
-  version "16.0.1"
-  resolved "https://registry.yarnpkg.com/dnd-core/-/dnd-core-16.0.1.tgz#a1c213ed08961f6bd1959a28bb76f1a868360d19"
-  integrity sha512-HK294sl7tbw6F6IeuK16YSBUoorvHpY8RHO+9yFfaJyCDVb6n7PRcezrOEOa2SBCqiYpemh5Jx20ZcjKdFAVng==
-  dependencies:
-    "@react-dnd/asap" "^5.0.1"
-    "@react-dnd/invariant" "^4.0.1"
-    redux "^4.2.0"
-
-dnd-multi-backend@^7.0.0-alpha.4:
-  version "7.1.3"
-  resolved "https://registry.yarnpkg.com/dnd-multi-backend/-/dnd-multi-backend-7.1.3.tgz#401ba42bb4ee79246a966cd3c5bfafbc3ed6e57c"
-  integrity sha512-INOAt4p/5fkaAUpXu0I+ialm1Ewi9HmIhs/558RFrhBZ0s/XGL991w3A2GvBuaPQNsZJEzCJh0mv/0dswxfSfQ==
-
 dns-packet@^5.2.2:
   version "5.6.1"
   resolved "https://registry.yarnpkg.com/dns-packet/-/dns-packet-5.6.1.tgz#ae888ad425a9d1478a0674256ab866de1012cf2f"
@@ -10374,6 +10683,26 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
+docusaurus-plugin-redoc@2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/docusaurus-plugin-redoc/-/docusaurus-plugin-redoc-2.1.0.tgz#c7db945609ad9f15dde2062dd4ca0f824808ab6a"
+  integrity sha512-uz1rjUTuUpTxg0Y3xX3GkBc0DYdTO6/Au6MMXxoTwzlJiHSq0+pAG/i729mDs1TOpEu/psSyJxhM0hv85Li75w==
+  dependencies:
+    "@redocly/openapi-core" "1.10.3"
+    redoc "2.1.3"
+
+docusaurus-theme-redoc@2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/docusaurus-theme-redoc/-/docusaurus-theme-redoc-2.0.2.tgz#d56d3b5a5773f609f8d4d0e29ea3614952632554"
+  integrity sha512-qa8svxKCipIvokNGctoQRP3Vz+HTF2Mnwg6xzY/W/LR5TYEIu3nuSvouLLR58uBrHKGzGpto5CEPDq0SvVvDlA==
+  dependencies:
+    "@redocly/openapi-core" "1.10.3"
+    clsx "^1.2.1"
+    lodash "^4.17.21"
+    mobx "^6.0.4"
+    redoc "2.1.3"
+    styled-components "^6.0.5"
+
 dom-accessibility-api@^0.5.9:
   version "0.5.16"
   resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz#5a7429e6066eb3664d911e33fb0e45de8eb08453"
@@ -10434,6 +10763,13 @@ domexception@^1.0.1:
   dependencies:
     webidl-conversions "^4.0.2"
 
+domexception@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/domexception/-/domexception-2.0.1.tgz#fb44aefba793e1574b0af6aed2801d057529f304"
+  integrity sha512-yxJ2mFy/sibVQlu5qHjOkf9J3K6zgmCxgJ94u2EdvDOV09H+32LtRswEcUsmUWN72pVLOEnTSRaIVVzVQgS0dg==
+  dependencies:
+    webidl-conversions "^5.0.0"
+
 domhandler@^4.0.0, domhandler@^4.2.0, domhandler@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.3.1.tgz#8d792033416f59d68bc03a5aa7b018c1ca89279c"
@@ -10453,6 +10789,11 @@ dompurify@=3.1.4:
   resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.1.4.tgz#42121304b2b3a6bae22f80131ff8a8f3f3c56be2"
   integrity sha512-2gnshi6OshmuKil8rMZuQCGiUF3cUxHY3NGDzUAdUx/NPEe5DVnO8BDoAQouvgwnx0R/+a6jUn36Z0FSdq8vww==
 
+dompurify@^2.2.8:
+  version "2.5.5"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.5.5.tgz#0540a05b8020d4691ee9c6083fb23b2c919276fc"
+  integrity sha512-FgbqnEPiv5Vdtwt6Mxl7XSylttCC03cqP5ldNT2z+Kj0nLxPHJH4+1Cyf5Jasxhw93Rl4Oo11qRoUV72fmya2Q==
+
 dompurify@^3.0.5:
   version "3.1.5"
   resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.1.5.tgz#2c6a113fc728682a0f55684b1388c58ddb79dc38"
@@ -10515,16 +10856,30 @@ dotenv@16.0.3:
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.0.3.tgz#115aec42bac5053db3c456db30cc243a5a836a07"
   integrity sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ==
 
-dotenv@^16.0.0, dotenv@^16.0.3:
+dotenv@^16.0.0:
   version "16.4.5"
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.4.5.tgz#cdd3b3b604cb327e286b4762e13502f717cb099f"
   integrity sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==
 
+download-stats@^0.3.4:
+  version "0.3.4"
+  resolved "https://registry.yarnpkg.com/download-stats/-/download-stats-0.3.4.tgz#67ea0c32f14acd9f639da704eef509684ba2dae7"
+  integrity sha512-ic2BigbyUWx7/CBbsfGjf71zUNZB4edBGC3oRliSzsoNmvyVx3Ycfp1w3vp2Y78Ee0eIIkjIEO5KzW0zThDGaA==
+  dependencies:
+    JSONStream "^1.2.1"
+    lazy-cache "^2.0.1"
+    moment "^2.15.1"
+
 drange@^1.0.2:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/drange/-/drange-1.1.1.tgz#b2aecec2aab82fcef11dbbd7b9e32b83f8f6c0b8"
   integrity sha512-pYxfDYpued//QpnLIm4Avk7rsNtAtQkUES2cwAYSvD/wd2pKD71gN2Ebj3e7klzXwjocvE8c5vx/1fxwpqmSxA==
 
+duplexer3@^0.1.4:
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/duplexer3/-/duplexer3-0.1.5.tgz#0b5e4d7bad5de8901ea4440624c8e1d20099217e"
+  integrity sha512-1A8za6ws41LQgv9HrE/66jyC5yuSjQ3L/KOpFtoBilsAK2iA2wuS5rTt1OCzIvtS2V7nVmedsUU+DGRcjBmOYA==
+
 duplexer@^0.1.2, duplexer@~0.1.1:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6"
@@ -10553,12 +10908,25 @@ ecc-jsbn@~0.1.1:
     jsbn "~0.1.0"
     safer-buffer "^2.1.0"
 
+editions@^2.2.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/editions/-/editions-2.3.1.tgz#3bc9962f1978e801312fbd0aebfed63b49bfe698"
+  integrity sha512-ptGvkwTvGdGfC0hfhKg0MT+TRLRKGtUiWGBInxOm5pz7ssADezahjCUaYuZ8Dr+C05FW0AECIIPt4WBxVINEhA==
+  dependencies:
+    errlop "^2.0.0"
+    semver "^6.3.0"
+
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
   integrity sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==
 
-ejs@^3.1.10:
+ejs@^2.5.9, ejs@^2.6.1:
+  version "2.7.4"
+  resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.7.4.tgz#48661287573dcc53e366c7a1ae52c3a120eec9ba"
+  integrity sha512-7vmuyh5+kuUyJKePhQfRQBhXV5Ce+RnaeeQArKu1EAMpL3WbgMt5WG6uQZpEVvYSSsxMXRKOewtDk9RaTKXRlA==
+
+ejs@^3.1.10, ejs@^3.1.5:
   version "3.1.10"
   resolved "https://registry.yarnpkg.com/ejs/-/ejs-3.1.10.tgz#69ab8358b14e896f80cc39e62087b88500c3ac3b"
   integrity sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==
@@ -10575,16 +10943,21 @@ electron-to-chromium@^1.4.820:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.2.tgz#6126ad229ce45e781ec54ca40db0504787f23d19"
   integrity sha512-kc4r3U3V3WLaaZqThjYz/Y6z8tJe+7K0bbjUVo3i+LWIypVdMx5nXCkwRe6SWbY6ILqLdc1rKcKmr3HoH7wjSQ==
 
-electron-to-chromium@^1.5.4:
-  version "1.5.27"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.27.tgz#5203ce5d6054857d84ba84d3681cbe59132ade78"
-  integrity sha512-o37j1vZqCoEgBuWWXLHQgTN/KDKe7zwpiY5CPeq2RvUqOyJw9xnrULzZAEVQ5p4h+zjMk7hgtOoPdnLxr7m/jw==
-
 elkjs@^0.9.0:
   version "0.9.3"
   resolved "https://registry.yarnpkg.com/elkjs/-/elkjs-0.9.3.tgz#16711f8ceb09f1b12b99e971b138a8384a529161"
   integrity sha512-f/ZeWvW/BCXbhGEf1Ujp29EASo/lk1FDnETgNKwJrsVvGZhUWCZyg3xLJjAsxfOmt8KjswHmI5EwCQcPMpOYhQ==
 
+emitter-component@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/emitter-component/-/emitter-component-1.1.2.tgz#d65af5833dc7c682fd0ade35f902d16bc4bad772"
+  integrity sha512-QdXO3nXOzZB4pAjM0n6ZE+R9/+kPpECA/XSELIcc54NeYVnBqIk+4DFiBgK+8QbV3mdvTG6nedl7dTYgO+5wDw==
+
+emittery@^0.7.1:
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.7.2.tgz#25595908e13af0f5674ab419396e2fb394cdfa82"
+  integrity sha512-A8OG5SR/ij3SsJdWDJdkkSYUjQdCUx6APQXem0SaEePBSRg4eymGYwBkKo1Y6DU+af/Jn2dBQqDBvjnr9Vi8nQ==
+
 emoji-regex@^10.2.1:
   version "10.3.0"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-10.3.0.tgz#76998b9268409eb3dae3de989254d456e70cfe23"
@@ -10663,6 +11036,11 @@ err-code@^3.0.1:
   resolved "https://registry.yarnpkg.com/err-code/-/err-code-3.0.1.tgz#a444c7b992705f2b120ee320b09972eef331c920"
   integrity sha512-GiaH0KJUewYok+eeY05IIgjtAe4Yltygk9Wqp1V5yVWLdhf0hYZchRjNIT9bb0mSwRcIusT3cx7PJUf3zEIfUA==
 
+errlop@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/errlop/-/errlop-2.2.0.tgz#1ff383f8f917ae328bebb802d6ca69666a42d21b"
+  integrity sha512-e64Qj9+4aZzjzzFpZC7p5kmm/ccCrbLhAJplhsDXQFs87XTsXwOpH4s1Io2s90Tau/8r2j9f4l/thhDevRjzxw==
+
 error-ex@^1.3.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
@@ -10677,6 +11055,13 @@ error-stack-parser@^2.0.6:
   dependencies:
     stackframe "^1.3.4"
 
+error@^7.0.2:
+  version "7.2.1"
+  resolved "https://registry.yarnpkg.com/error/-/error-7.2.1.tgz#eab21a4689b5f684fc83da84a0e390de82d94894"
+  integrity sha512-fo9HBvWnx3NGUKMvMwB/CBCMMrfEJgbDTVDEkPygA3Bdd3lM1OyCd+rbQ8BwnpF6GdVeOLDNmyL4N5Bg80ZvdA==
+  dependencies:
+    string-template "~0.2.1"
+
 es-abstract@^1.22.1, es-abstract@^1.22.3, es-abstract@^1.23.0, es-abstract@^1.23.1, es-abstract@^1.23.2, es-abstract@^1.23.3:
   version "1.23.3"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.23.3.tgz#8f0c5a35cd215312573c5a27c87dfd6c881a0aa0"
@@ -10832,7 +11217,12 @@ es6-iterator@^2.0.3:
     es5-ext "^0.10.35"
     es6-symbol "^3.1.1"
 
-es6-symbol@^3, es6-symbol@^3.1.1, es6-symbol@^3.1.3:
+es6-promise@^3.2.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-3.3.1.tgz#a08cdde84ccdbf34d027a1451bc91d4bcd28a613"
+  integrity sha512-SOp9Phqvqn7jtEUxPWdWfWoLmyt2VaJ6MpvP9Comy1MceMXqE6bxvaTu4iaxpYYPzhny28Lc+M87/c2cPK6lDg==
+
+es6-symbol@^3.1.1, es6-symbol@^3.1.3:
   version "3.1.4"
   resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.4.tgz#f4e7d28013770b4208ecbf3e0bf14d3bcb557b8c"
   integrity sha512-U9bFFjX8tFiATgtkJ1zg25+KviIXpgRvRHS8sau3GfhVzThRQrOeksPeT0BWW2MNZs1OEWJ1DPXOQMn0KKRkvg==
@@ -10852,6 +11242,15 @@ esbuild-register@^3.5.0:
   dependencies:
     debug "^4.3.4"
 
+esbuild-sass-plugin@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/esbuild-sass-plugin/-/esbuild-sass-plugin-3.3.1.tgz#74d096127bff10072042de30119235f276655566"
+  integrity sha512-SnO1ls+d52n6j8gRRpjexXI8MsHEaumS0IdDHaYM29Y6gakzZYMls6i9ql9+AWMSQk/eryndmUpXEgT34QrX1A==
+  dependencies:
+    resolve "^1.22.8"
+    safe-identifier "^0.4.2"
+    sass "^1.71.1"
+
 "esbuild@^0.18.0 || ^0.19.0 || ^0.20.0":
   version "0.20.2"
   resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.20.2.tgz#9d6b2386561766ee6b5a55196c6d766d28c87ea1"
@@ -10881,7 +11280,7 @@ esbuild-register@^3.5.0:
     "@esbuild/win32-ia32" "0.20.2"
     "@esbuild/win32-x64" "0.20.2"
 
-esbuild@^0.21.3, esbuild@^0.21.5, esbuild@~0.21.4:
+esbuild@^0.21.3, esbuild@^0.21.4, esbuild@^0.21.5, esbuild@~0.21.4:
   version "0.21.5"
   resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.21.5.tgz#9ca301b120922959b766360d8ac830da0d02997d"
   integrity sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==
@@ -10915,11 +11314,6 @@ escalade@^3.1.1, escalade@^3.1.2:
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.2.tgz#54076e9ab29ea5bf3d8f1ed62acffbb88272df27"
   integrity sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==
 
-escape-carriage@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/escape-carriage/-/escape-carriage-1.3.1.tgz#842658e5422497b1232585e517dc813fc6a86170"
-  integrity sha512-GwBr6yViW3ttx1kb7/Oh+gKQ1/TrhYwxKqVmg5gS+BK+Qe2KrOa/Vh7w3HPBvgGf0LfcDGoY9I6NHKoA5Hozhw==
-
 escape-goat@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/escape-goat/-/escape-goat-4.0.0.tgz#9424820331b510b0666b98f7873fe11ac4aa8081"
@@ -10930,11 +11324,16 @@ escape-html@^1.0.3, escape-html@~1.0.3:
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
   integrity sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==
 
-escape-string-regexp@1.0.5, escape-string-regexp@^1.0.3, escape-string-regexp@^1.0.5:
+escape-string-regexp@1.0.5, escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
   integrity sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==
 
+escape-string-regexp@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz#a30304e99daa32e23b2fd20f51babd07cffca344"
+  integrity sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==
+
 escape-string-regexp@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
@@ -10945,7 +11344,7 @@ escape-string-regexp@^5.0.0:
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz#4683126b500b61762f2dbebace1806e8be31b1c8"
   integrity sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==
 
-escodegen@^2.1.0:
+escodegen@^2.0.0, escodegen@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-2.1.0.tgz#ba93bbb7a43986d29d6041f99f5262da773e2e17"
   integrity sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==
@@ -11138,6 +11537,11 @@ eslint@^8.57.0:
     strip-ansi "^6.0.1"
     text-table "^0.2.0"
 
+esm@^3.2.25:
+  version "3.2.25"
+  resolved "https://registry.yarnpkg.com/esm/-/esm-3.2.25.tgz#342c18c29d56157688ba5ce31f8431fbb795cc10"
+  integrity sha512-U1suiZ2oDVWv4zPO56S0NcR5QriEahGtdN2OR6FiOG4WJvcjBVFB0qI4+eKoWFH483PKGuLuu6V8Z4T5g63UVA==
+
 esniff@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/esniff/-/esniff-2.0.1.tgz#a4d4b43a5c71c7ec51c51098c1d8a29081f9b308"
@@ -11298,7 +11702,7 @@ eventemitter2@6.4.7:
   resolved "https://registry.yarnpkg.com/eventemitter2/-/eventemitter2-6.4.7.tgz#a7f6c4d7abf28a14c1ef3442f21cb306a054271d"
   integrity sha512-tYUSVOGeQPKt/eC1ABfhHy5Xd96N3oIijJvN3O9+TsC28T5V9yX9oEfEK5faP0EFSNVOG97qtAS68GBrQB2hDg==
 
-eventemitter3@^4.0.0:
+eventemitter3@^4.0.0, eventemitter3@^4.0.7:
   version "4.0.7"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
   integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
@@ -11313,7 +11717,12 @@ events@^3.2.0, events@^3.3.0:
   resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
   integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
 
-execa@4.1.0:
+exec-sh@^0.3.2:
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/exec-sh/-/exec-sh-0.3.6.tgz#ff264f9e325519a60cb5e273692943483cca63bc"
+  integrity sha512-nQn+hI3yp+oD0huYhKwvYI32+JFeq+XkNcD1GAo3Y/MjxsfVGmrrzrnzjWiNY6f+pUCP440fThsFh5gZrRAU/w==
+
+execa@4.1.0, execa@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/execa/-/execa-4.1.0.tgz#4e5491ad1572f2f17a77d388c6c857135b22847a"
   integrity sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA==
@@ -11358,6 +11767,19 @@ execa@7.2.0:
     signal-exit "^3.0.7"
     strip-final-newline "^3.0.0"
 
+execa@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-1.0.0.tgz#c6236a5bb4df6d6f15e88e7f017798216749ddd8"
+  integrity sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==
+  dependencies:
+    cross-spawn "^6.0.0"
+    get-stream "^4.0.0"
+    is-stream "^1.1.0"
+    npm-run-path "^2.0.0"
+    p-finally "^1.0.0"
+    signal-exit "^3.0.0"
+    strip-eof "^1.0.0"
+
 execa@^8.0.1:
   version "8.0.1"
   resolved "https://registry.yarnpkg.com/execa/-/execa-8.0.1.tgz#51f6a5943b580f963c3ca9c6321796db8cc39b8c"
@@ -11380,11 +11802,41 @@ executable@^4.1.1:
   dependencies:
     pify "^2.2.0"
 
+exit@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
+  integrity sha512-Zk/eNKV2zbjpKzrsQ+n1G6poVbErQxJ0LBOJXaKZ1EViLzH+hrLu9cdXI4zw9dBQJslwBEpbQ2P1oS7nDxs6jQ==
+
+expand-brackets@^2.1.4:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-2.1.4.tgz#b77735e315ce30f6b6eff0f83b04151a22449622"
+  integrity sha512-w/ozOKR9Obk3qoWeY/WDi6MFta9AoMR+zud60mdnbniMcBxRuFJyDt2LdX/14A1UABeqk+Uk+LDfUpvoGKppZA==
+  dependencies:
+    debug "^2.3.3"
+    define-property "^0.2.5"
+    extend-shallow "^2.0.1"
+    posix-character-classes "^0.1.0"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.1"
+
 expand-template@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/expand-template/-/expand-template-2.0.3.tgz#6e14b3fcee0f3a6340ecb57d2e8918692052a47c"
   integrity sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==
 
+expect@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/expect/-/expect-26.6.2.tgz#c6b996bf26bf3fe18b67b2d0f51fc981ba934417"
+  integrity sha512-9/hlOBkQl2l/PLHJx6JjoDF6xPKcJEsUlWKb23rKE7KzeDqUZKXKNMW27KIue5JMdBV9HgmoJPcc8HtO85t9IA==
+  dependencies:
+    "@jest/types" "^26.6.2"
+    ansi-styles "^4.0.0"
+    jest-get-type "^26.3.0"
+    jest-matcher-utils "^26.6.2"
+    jest-message-util "^26.6.2"
+    jest-regex-util "^26.0.0"
+
 expr-eval-fork@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/expr-eval-fork/-/expr-eval-fork-2.0.2.tgz#97136ac0a8178522055500f55d3d3c5ad54f400d"
@@ -11446,7 +11898,15 @@ extend-shallow@^2.0.1:
   dependencies:
     is-extendable "^0.1.0"
 
-extend@^3.0.0, extend@^3.0.1, extend@~3.0.2:
+extend-shallow@^3.0.0, extend-shallow@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-3.0.2.tgz#26a71aaf073b39fb2127172746131c2704028db8"
+  integrity sha512-BwY5b5Ql4+qZoefgMj2NUmx+tehVTH/Kf4k1ZEtOHNFcm2wSxMRo992l6X3TIgni2eZVTZ85xMOjF31fwZAj6Q==
+  dependencies:
+    assign-symbols "^1.0.0"
+    is-extendable "^1.0.1"
+
+extend@^3.0.0, extend@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
   integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
@@ -11456,7 +11916,16 @@ extendable-error@^0.1.5:
   resolved "https://registry.yarnpkg.com/extendable-error/-/extendable-error-0.1.7.tgz#60b9adf206264ac920058a7395685ae4670c2b96"
   integrity sha512-UOiS2in6/Q0FK0R0q6UY9vYpQ21mr/Qn1KOnte7vsACuNJf514WvCCUHSRCPcgjPT2bAhNIJdlE6bVap1GKmeg==
 
-external-editor@^3.1.0:
+external-editor@^2.1.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-2.2.0.tgz#045511cfd8d133f3846673d1047c154e214ad3d5"
+  integrity sha512-bSn6gvGxKt+b7+6TKEv1ZycHleA7aHhRHyAqJyp5pbUFuYYNIzpZnQDk7AsYckyWdEnTeAnay0aCy2aV6iTk9A==
+  dependencies:
+    chardet "^0.4.0"
+    iconv-lite "^0.4.17"
+    tmp "^0.0.33"
+
+external-editor@^3.0.3, external-editor@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-3.1.0.tgz#cb03f740befae03ea4d283caed2741a83f335495"
   integrity sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==
@@ -11465,6 +11934,20 @@ external-editor@^3.1.0:
     iconv-lite "^0.4.24"
     tmp "^0.0.33"
 
+extglob@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/extglob/-/extglob-2.0.4.tgz#ad00fe4dc612a9232e8718711dc5cb5ab0285543"
+  integrity sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==
+  dependencies:
+    array-unique "^0.3.2"
+    define-property "^1.0.0"
+    expand-brackets "^2.1.4"
+    extend-shallow "^2.0.1"
+    fragment-cache "^0.2.1"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.1"
+
 extract-zip@2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/extract-zip/-/extract-zip-2.0.1.tgz#663dca56fe46df890d5f131ef4a06d22bb8ba13a"
@@ -11501,6 +11984,18 @@ fast-diff@^1.1.2:
   resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.3.0.tgz#ece407fa550a64d638536cd727e129c61616e0f0"
   integrity sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==
 
+fast-glob@^2.0.2, fast-glob@^2.2.6:
+  version "2.2.7"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-2.2.7.tgz#6953857c3afa475fff92ee6015d52da70a4cd39d"
+  integrity sha512-g1KuQwHOZAmOZMuBtHdxDtju+T2RT8jgCC9aANsbpdiDDTSnjgfuVsIBNKbUeJI3oKMRExcfNDtJl4OhbffMsw==
+  dependencies:
+    "@mrmlnc/readdir-enhanced" "^2.2.1"
+    "@nodelib/fs.stat" "^1.1.2"
+    glob-parent "^3.1.0"
+    is-glob "^4.0.0"
+    merge2 "^1.2.3"
+    micromatch "^3.1.10"
+
 fast-glob@^3.2.11, fast-glob@^3.2.9, fast-glob@^3.3.0, fast-glob@^3.3.1, fast-glob@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.2.tgz#a904501e57cfdd2ffcded45e99a54fef55e46129"
@@ -11532,16 +12027,16 @@ fast-loops@^1.1.3:
   resolved "https://registry.yarnpkg.com/fast-loops/-/fast-loops-1.1.3.tgz#ce96adb86d07e7bf9b4822ab9c6fac9964981f75"
   integrity sha512-8EZzEP0eKkEEVX+drtd9mtuQ+/QrlfW/5MlwcwK5Nds6EkZ/tRzEexkzUY2mIssnAyVLT+TKHuRXmFNNXYUd6g==
 
+fast-safe-stringify@^2.0.7:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/fast-safe-stringify/-/fast-safe-stringify-2.1.1.tgz#c406a83b6e70d9e35ce3b30a81141df30aeba884"
+  integrity sha512-W+KJc2dmILlPplD/H4K9l9LcAHAfPtP6BY84uVLXQ6Evcz9Lcg33Y2z1IVblT6xdY54PXYVHEv+0Wpq8Io6zkA==
+
 fast-shallow-equal@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fast-shallow-equal/-/fast-shallow-equal-1.0.0.tgz#d4dcaf6472440dcefa6f88b98e3251e27f25628b"
   integrity sha512-HPtaa38cPgWvaCFmRNhlc6NG7pv6NUHqjPgVAkWGoB9mQMwYB27/K0CvOM5Czy+qpT3e8XJ6Q4aPAnzpNpzNaw==
 
-fast-uri@^3.0.1:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/fast-uri/-/fast-uri-3.0.3.tgz#892a1c91802d5d7860de728f18608a0573142241"
-  integrity sha512-aLrHthzCjH5He4Z2H9YZ+v6Ujb9ocRuW6ZzkJQOrTxleEijANq4v1TsaPaVG1PZcuurEzrLcWRyYBYXD5cEiaw==
-
 fast-url-parser@1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/fast-url-parser/-/fast-url-parser-1.1.3.tgz#f4af3ea9f34d8a271cf58ad2b3759f431f0b318d"
@@ -11582,6 +12077,13 @@ faye-websocket@^0.11.3:
   dependencies:
     websocket-driver ">=0.5.1"
 
+fb-watchman@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/fb-watchman/-/fb-watchman-2.0.2.tgz#e9524ee6b5c77e9e5001af0f85f3adbb8623255c"
+  integrity sha512-p5161BqbuCaSnB8jIbzQHOlpgsPmK5rJVDfDKO91Axs5NC1uu3HRQm6wt9cd9/+GtQQIO53JdGXXoyDpTAsgYA==
+  dependencies:
+    bser "2.1.1"
+
 fbp-client@^0.4.3:
   version "0.4.3"
   resolved "https://registry.yarnpkg.com/fbp-client/-/fbp-client-0.4.3.tgz#8bd1158466b511abc8ea672cf8151d68b5742948"
@@ -11641,7 +12143,14 @@ fflate@^0.4.4:
   resolved "https://registry.yarnpkg.com/fflate/-/fflate-0.4.8.tgz#f90b82aefbd8ac174213abb338bd7ef848f0f5ae"
   integrity sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==
 
-figures@^3.2.0:
+figures@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/figures/-/figures-2.0.0.tgz#3ab1a2d2a62c8bfb431a0c94cb797a2fce27c962"
+  integrity sha512-Oa2M9atig69ZkfwiApY8F2Yy+tzMbazyvqv21R0NsSC8floSOC09BbT1ITWAdoMGQvJ/aZnR1KMwdx9tvHnTNA==
+  dependencies:
+    escape-string-regexp "^1.0.5"
+
+figures@^3.0.0, figures@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/figures/-/figures-3.2.0.tgz#625c18bd293c604dc4a8ddb2febf0c88341746af"
   integrity sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==
@@ -11683,6 +12192,16 @@ filesize@^8.0.6:
   resolved "https://registry.yarnpkg.com/filesize/-/filesize-8.0.7.tgz#695e70d80f4e47012c132d57a059e80c6b580bd8"
   integrity sha512-pjmC+bkIF8XI7fWaH8KxHcZL3DPybs1roSKP4rKDvy20tAWwIObE4+JIseG2byfGKhud5ZnM4YSGKBz7Sh0ndQ==
 
+fill-range@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-4.0.0.tgz#d544811d428f98eb06a63dc402d2403c328c38f7"
+  integrity sha512-VcpLTWqWDiTerugjj8e3+esbg+skS3M9e54UuR3iCeIDMXCLTsAH8hTSzDQU/X6/6t3eYkOKoZSef2PlU6U1XQ==
+  dependencies:
+    extend-shallow "^2.0.1"
+    is-number "^3.0.0"
+    repeat-string "^1.6.1"
+    to-regex-range "^2.1.0"
+
 fill-range@^7.1.1:
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.1.1.tgz#44265d3cac07e3ea7dc247516380643754a05292"
@@ -11729,6 +12248,13 @@ find-cache-dir@^4.0.0:
     common-path-prefix "^3.0.0"
     pkg-dir "^7.0.0"
 
+find-up@^2.0.0, find-up@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
+  integrity sha512-NWzkk0jSJtTt08+FBFMvXoeZnOJD+jTtsRmBYbAIzJdX6l7dLgR7CTubCM5/eDdPUBvLCeVasP1brfVR/9/EZQ==
+  dependencies:
+    locate-path "^2.0.0"
+
 find-up@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73"
@@ -11775,6 +12301,13 @@ find-yarn-workspace-root@^2.0.0:
   dependencies:
     micromatch "^4.0.2"
 
+first-chunk-stream@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/first-chunk-stream/-/first-chunk-stream-2.0.0.tgz#1bdecdb8e083c0664b91945581577a43a9f31d70"
+  integrity sha512-X8Z+b/0L4lToKYq+lwnKqi9X/Zek0NibLpsJgVsSxpoYq7JtiCtRb5HqKVEjEw/qAb/4AKKRLOwwKHlWNpm2Eg==
+  dependencies:
+    readable-stream "^2.0.2"
+
 flat-cache@^3.0.4:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.2.0.tgz#2c0c2d5040c99b1632771a9d105725c0115363ee"
@@ -11822,7 +12355,7 @@ focus-trap@^7.4.0, focus-trap@^7.5.4:
   dependencies:
     tabbable "^6.2.0"
 
-follow-redirects@^1.0.0, follow-redirects@^1.15.6:
+follow-redirects@^1.0.0, follow-redirects@^1.14.0, follow-redirects@^1.15.6:
   version "1.15.6"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.6.tgz#7f815c0cda4249c74ff09e95ef97c23b5fd0399b"
   integrity sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==
@@ -11834,6 +12367,16 @@ for-each@^0.3.3:
   dependencies:
     is-callable "^1.1.3"
 
+for-in@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
+  integrity sha512-7EwmXrOjyL+ChxMhmG5lnW9MPt1aIeZEwKhQzoBUdTV0N3zuwWDZYVJatDvZ2OyzPUvdIAZDsCetk3coyMfcnQ==
+
+foreach@^2.0.4:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.6.tgz#87bcc8a1a0e74000ff2bf9802110708cfb02eb6e"
+  integrity sha512-k6GAGDyqLe9JaebCsFCoudPPWfihKu8pylYXRlqP1J7ms39iPoTtk2fviNglIeQEwdh0bQeKJ01ZPyuyQvKzwg==
+
 foreground-child@^3.1.0, foreground-child@^3.1.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/foreground-child/-/foreground-child-3.2.1.tgz#767004ccf3a5b30df39bed90718bab43fe0a59f7"
@@ -11876,6 +12419,15 @@ form-data-encoder@^2.1.2:
   resolved "https://registry.yarnpkg.com/form-data-encoder/-/form-data-encoder-2.1.4.tgz#261ea35d2a70d48d30ec7a9603130fa5515e9cd5"
   integrity sha512-yDYSgNMraqvnxiEXO4hi88+YZxaHC6QKzb5N84iRCTDeRO7ZALpir/lVmf/uXUhnwUr2O4HU8s/n6x+yNjQkHw==
 
+form-data@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-3.0.1.tgz#ebd53791b78356a99af9a300d4282c4d5eb9755f"
+  integrity sha512-RHkBKtLWUVwd7SqRIvCZMEvAMoGUp0XU+seQiZejj0COz3RI3hWP4sCv3gZWWLjJTd7rGwcsF5eKZGii0r/hbg==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
 form-data@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
@@ -11917,26 +12469,12 @@ fraction.js@^4.3.7:
   resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7"
   integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
 
-framer-motion@^6.2.8:
-  version "6.5.1"
-  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-6.5.1.tgz#802448a16a6eb764124bf36d8cbdfa6dd6b931a7"
-  integrity sha512-o1BGqqposwi7cgDrtg0dNONhkmPsUFDaLcKXigzuTFC5x58mE8iyTazxSudFzmT6MEyJKfjjU8ItoMe3W+3fiw==
-  dependencies:
-    "@motionone/dom" "10.12.0"
-    framesync "6.0.1"
-    hey-listen "^1.0.8"
-    popmotion "11.0.3"
-    style-value-types "5.0.0"
-    tslib "^2.1.0"
-  optionalDependencies:
-    "@emotion/is-prop-valid" "^0.8.2"
-
-framesync@6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/framesync/-/framesync-6.0.1.tgz#5e32fc01f1c42b39c654c35b16440e07a25d6f20"
-  integrity sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA==
+fragment-cache@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19"
+  integrity sha512-GMBAbW9antB8iZRHLoGw0b3HANt57diZYFO/HL1JGIC1MjKrdmhxvrJbupnVvpys0zsz7yBApXdQyfepKly2kA==
   dependencies:
-    tslib "^2.1.0"
+    map-cache "^0.2.2"
 
 framework-utils@^1.1.0:
   version "1.1.0"
@@ -11967,7 +12505,7 @@ fs-extra@11.1.1:
     jsonfile "^6.0.1"
     universalify "^2.0.0"
 
-fs-extra@^11.0.0, fs-extra@^11.1.0, fs-extra@^11.1.1, fs-extra@^11.2.0:
+fs-extra@^11.1.0, fs-extra@^11.1.1, fs-extra@^11.2.0:
   version "11.2.0"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-11.2.0.tgz#e70e17dfad64232287d01929399e0ea7c86b0e5b"
   integrity sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==
@@ -12028,7 +12566,7 @@ fs.realpath@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
-fsevents@~2.3.2, fsevents@~2.3.3:
+fsevents@^2.1.2, fsevents@~2.3.2, fsevents@~2.3.3:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
   integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
@@ -12067,13 +12605,6 @@ gauge@~2.7.3:
     strip-ansi "^3.0.1"
     wide-align "^1.1.0"
 
-generic-names@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/generic-names/-/generic-names-4.0.0.tgz#0bd8a2fd23fe8ea16cbd0a279acd69c06933d9a3"
-  integrity sha512-ySFolZQfw9FoDb3ed9d80Cm9f0+r7qj+HJkWjeD9RBfpxEVTlVhol+gvaQB/78WbwYfbnNh8nWHHBSlg072y6A==
-  dependencies:
-    loader-utils "^3.2.0"
-
 gensync@^1.0.0-beta.2:
   version "1.0.0-beta.2"
   resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
@@ -12105,11 +12636,6 @@ get-intrinsic@^1.1.3, get-intrinsic@^1.2.1, get-intrinsic@^1.2.2, get-intrinsic@
     has-symbols "^1.0.3"
     hasown "^2.0.0"
 
-get-node-dimensions@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/get-node-dimensions/-/get-node-dimensions-1.2.1.tgz#fb7b4bb57060fb4247dd51c9d690dfbec56b0823"
-  integrity sha512-2MSPMu7S1iOTL+BOa6K1S62hB2zUAYNF/lV0gSVlOaacd087lc6nR1H1r0e3B1CerTo+RceOmi1iJW+vp21xcQ==
-
 get-nonce@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/get-nonce/-/get-nonce-1.0.1.tgz#fdf3f0278073820d2ce9426c18f07481b1e0cdf3"
@@ -12125,10 +12651,27 @@ get-own-enumerable-property-symbols@^3.0.0:
   resolved "https://registry.yarnpkg.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz#b5fde77f22cbe35f390b4e089922c50bce6ef664"
   integrity sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==
 
-get-stdin@^9.0.0:
-  version "9.0.0"
-  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-9.0.0.tgz#3983ff82e03d56f1b2ea0d3e60325f39d703a575"
-  integrity sha512-dVKBjfWisLAicarI2Sf+JuBE/DghV4UzNAVe9yhEJuzeREd3JhOTE9cUaJTeSa77fsbQUK3pcOpJfM59+VKZaA==
+get-package-type@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/get-package-type/-/get-package-type-0.1.0.tgz#8de2d803cff44df3bc6c456e6668b36c3926e11a"
+  integrity sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==
+
+get-stdin@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe"
+  integrity sha512-F5aQMywwJ2n85s4hJPTT9RPxGmubonuB10MNYo17/xph174n2MIR33HRguhzVag10O/npM7SPk73LMZNP+FaWw==
+
+get-stream@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
+  integrity sha512-GlhdIUuVakc8SJ6kK0zAFbiGzRFzNnY4jUuEbV9UROo4Y+0Ny4fjvcZFVTeDA4odpFyOQzaw6hXukJSq/f28sQ==
+
+get-stream@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-4.1.0.tgz#c1b255575f3dc21d59bfc79cd3d2b46b1c3a54b5"
+  integrity sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==
+  dependencies:
+    pump "^3.0.0"
 
 get-stream@^5.0.0, get-stream@^5.1.0:
   version "5.2.0"
@@ -12163,6 +12706,11 @@ get-tsconfig@^4.5.0, get-tsconfig@^4.7.5:
   dependencies:
     resolve-pkg-maps "^1.0.0"
 
+get-value@^2.0.3, get-value@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28"
+  integrity sha512-Ln0UQDlxH1BapMu3GPtf7CuYNwRZf2gwCuPqbyG6pB8WfmFpzqcy4xtAaAMUhnNqjMKTiCPZG2oMT3YSx8U2NA==
+
 getos@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/getos/-/getos-3.2.1.tgz#0134d1f4e00eb46144c5a9c0ac4dc087cbb27dc5"
@@ -12177,6 +12725,22 @@ getpass@^0.1.1:
   dependencies:
     assert-plus "^1.0.0"
 
+gh-got@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/gh-got/-/gh-got-5.0.0.tgz#ee95be37106fd8748a96f8d1db4baea89e1bfa8a"
+  integrity sha512-B9bWm0vDR7CSbFPxt528dbMTWd9CUc4h9U3Ji7e781Jy9Xm0p6QWKVndA4ETEzDCd3/GqVCjVfqqpl2kR1j3nA==
+  dependencies:
+    got "^6.2.0"
+    is-plain-obj "^1.1.0"
+
+gh-got@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/gh-got/-/gh-got-6.0.0.tgz#d74353004c6ec466647520a10bd46f7299d268d0"
+  integrity sha512-F/mS+fsWQMo1zfgG9MD8KWvTWPPzzhuVwY++fhQ5Ggd+0P+CAMHtzMZhNxG+TqGfHDChJKsbh6otfMGqO2AKBw==
+  dependencies:
+    got "^7.0.0"
+    is-plain-obj "^1.1.0"
+
 giget@^1.0.0:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/giget/-/giget-1.2.3.tgz#ef6845d1140e89adad595f7f3bb60aa31c672cb6"
@@ -12206,6 +12770,28 @@ github-slugger@^2.0.0:
   resolved "https://registry.yarnpkg.com/github-slugger/-/github-slugger-2.0.0.tgz#52cf2f9279a21eb6c59dd385b410f0c0adda8f1a"
   integrity sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==
 
+github-username@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/github-username/-/github-username-3.0.0.tgz#0a772219b3130743429f2456d0bdd3db55dce7b1"
+  integrity sha512-pbA1zobA7urImyNixOkCb/eO2fRadF7+RZgdjzT3/k/KukA8CY7QZ7BNCdCetH1kB0YqeBmY+Hn76XaC3rmmzQ==
+  dependencies:
+    gh-got "^5.0.0"
+
+github-username@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/github-username/-/github-username-4.1.0.tgz#cbe280041883206da4212ae9e4b5f169c30bf417"
+  integrity sha512-ABDfD5sjQOE8XDatHhN/WORUIAN1AGpgW4vegrKtby8x+jC/ALqCEuUDhCPlk9EXtjTHJWpuK25QdaehSUlCQg==
+  dependencies:
+    gh-got "^6.0.0"
+
+glob-parent@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-3.1.0.tgz#9e6af6299d8d3bd2bd40430832bd113df906c5ae"
+  integrity sha512-E8Ak/2+dZY6fnzlR7+ueWvhsH1SjHr4jjss4YS/h4py44jY9MhK/VFdaZJAWDz6BbL21KeteKxFSFpq8OS5gVA==
+  dependencies:
+    is-glob "^3.1.0"
+    path-dirname "^1.0.0"
+
 glob-parent@^5.1.2, glob-parent@~5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
@@ -12227,6 +12813,11 @@ glob-promise@^4.2.0:
   dependencies:
     "@types/glob" "^7.1.3"
 
+glob-to-regexp@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz#8c5a1494d2066c570cc3bfe4496175acc4d502ab"
+  integrity sha512-Iozmtbqv0noj0uDDqoL0zNq0VBEfK2YFoMAZoxJe4cwphvLR+JskfF30QhXHOR4m3KrE6NLRYw+U9MRXvifyig==
+
 glob-to-regexp@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
@@ -12244,7 +12835,7 @@ glob@7.1.2:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@^10.0.0, glob@^10.3.10:
+glob@^10.0.0, glob@^10.3.10, glob@^10.4.2:
   version "10.4.2"
   resolved "https://registry.yarnpkg.com/glob/-/glob-10.4.2.tgz#bed6b95dade5c1f80b4434daced233aee76160e5"
   integrity sha512-GwMlUF6PkPo3Gk21UxkCohOv0PLcIXVtKyLlpEI28R/cO/4eNOdmLk3CMW1wROV/WR/EsZOWAfBbBOqYvs88/w==
@@ -12256,31 +12847,7 @@ glob@^10.0.0, glob@^10.3.10:
     package-json-from-dist "^1.0.0"
     path-scurry "^1.11.1"
 
-glob@^10.4.2:
-  version "10.4.5"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-10.4.5.tgz#f4d9f0b90ffdbab09c9d77f5f29b4262517b0956"
-  integrity sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==
-  dependencies:
-    foreground-child "^3.1.0"
-    jackspeak "^3.1.2"
-    minimatch "^9.0.4"
-    minipass "^7.1.2"
-    package-json-from-dist "^1.0.0"
-    path-scurry "^1.11.1"
-
-glob@^11.0.0:
-  version "11.0.0"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-11.0.0.tgz#6031df0d7b65eaa1ccb9b29b5ced16cea658e77e"
-  integrity sha512-9UiX/Bl6J2yaBbxKoEBRm4Cipxgok8kQYcOPEhScPwebu2I0HoQOuYdIO6S3hLuWoZgpDpwQZMzTFxgpkyT76g==
-  dependencies:
-    foreground-child "^3.1.0"
-    jackspeak "^4.0.1"
-    minimatch "^10.0.0"
-    minipass "^7.1.2"
-    package-json-from-dist "^1.0.0"
-    path-scurry "^2.0.0"
-
-glob@^7.0.0, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6, glob@^7.2.0:
+glob@^7.0.0, glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6, glob@^7.2.0:
   version "7.2.3"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
   integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
@@ -12326,15 +12893,6 @@ global-prefix@^3.0.0:
     kind-of "^6.0.2"
     which "^1.3.1"
 
-global-prefix@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/global-prefix/-/global-prefix-4.0.0.tgz#e9cc79aab9be1d03287e156a3f912dd0895463ed"
-  integrity sha512-w0Uf9Y9/nyHinEk5vMJKRie+wa4kR5hmDbEhGGds/kG1PwGLLHKRoNMeJOyCQjjBkANlnScqgzcFwGHgmgLkVA==
-  dependencies:
-    ini "^4.1.3"
-    kind-of "^6.0.3"
-    which "^4.0.0"
-
 globals@^11.1.0:
   version "11.12.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
@@ -12355,7 +12913,7 @@ globalthis@^1.0.3:
     define-properties "^1.2.1"
     gopd "^1.0.1"
 
-globby@^11.0.0, globby@^11.0.1, globby@^11.0.4, globby@^11.1.0:
+globby@^11.0.0, globby@^11.0.1, globby@^11.0.3, globby@^11.0.4, globby@^11.1.0:
   version "11.1.0"
   resolved "https://registry.yarnpkg.com/globby/-/globby-11.1.0.tgz#bd4be98bb042f83d796f7e3811991fbe82a0d34b"
   integrity sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==
@@ -12378,18 +12936,6 @@ globby@^13.1.1:
     merge2 "^1.4.1"
     slash "^4.0.0"
 
-globby@^14.0.0:
-  version "14.0.2"
-  resolved "https://registry.yarnpkg.com/globby/-/globby-14.0.2.tgz#06554a54ccfe9264e5a9ff8eded46aa1e306482f"
-  integrity sha512-s3Fq41ZVh7vbbe2PN3nrW7yC7U7MFVc5c98/iTl9c2GawNMKx/J648KQRW6WKkuU8GIbbh2IXfIRQjOZnXcTnw==
-  dependencies:
-    "@sindresorhus/merge-streams" "^2.1.0"
-    fast-glob "^3.3.2"
-    ignore "^5.2.4"
-    path-type "^5.0.0"
-    slash "^5.1.0"
-    unicorn-magic "^0.1.0"
-
 globby@^14.0.1:
   version "14.0.1"
   resolved "https://registry.yarnpkg.com/globby/-/globby-14.0.1.tgz#a1b44841aa7f4c6d8af2bc39951109d77301959b"
@@ -12402,6 +12948,45 @@ globby@^14.0.1:
     slash "^5.1.0"
     unicorn-magic "^0.1.0"
 
+globby@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-7.1.1.tgz#fb2ccff9401f8600945dfada97440cca972b8680"
+  integrity sha512-yANWAN2DUcBtuus5Cpd+SKROzXHs2iVXFZt/Ykrfz6SAXqacLX25NZpltE+39ceMexYF4TtEadjuSTw8+3wX4g==
+  dependencies:
+    array-union "^1.0.1"
+    dir-glob "^2.0.0"
+    glob "^7.1.2"
+    ignore "^3.3.5"
+    pify "^3.0.0"
+    slash "^1.0.0"
+
+globby@^8.0.1:
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-8.0.2.tgz#5697619ccd95c5275dbb2d6faa42087c1a941d8d"
+  integrity sha512-yTzMmKygLp8RUpG1Ymu2VXPSJQZjNAZPD4ywgYEaG7e4tBJeUQBO8OpXrf1RCNcEs5alsoJYPAMiIHP0cmeC7w==
+  dependencies:
+    array-union "^1.0.1"
+    dir-glob "2.0.0"
+    fast-glob "^2.0.2"
+    glob "^7.1.2"
+    ignore "^3.3.5"
+    pify "^3.0.0"
+    slash "^1.0.0"
+
+globby@^9.2.0:
+  version "9.2.0"
+  resolved "https://registry.yarnpkg.com/globby/-/globby-9.2.0.tgz#fd029a706c703d29bdd170f4b6db3a3f7a7cb63d"
+  integrity sha512-ollPHROa5mcxDEkwg6bPt3QbEf4pDQSNtd6JPL1YvOvAo/7/0VAm9TccUeoTmarjPw4pfUthSCqcyfNB1I3ZSg==
+  dependencies:
+    "@types/glob" "^7.1.1"
+    array-union "^1.0.2"
+    dir-glob "^2.2.2"
+    fast-glob "^2.2.6"
+    glob "^7.1.3"
+    ignore "^4.0.3"
+    pify "^4.0.1"
+    slash "^2.0.0"
+
 globrex@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/globrex/-/globrex-0.1.2.tgz#dd5d9ec826232730cd6793a5e33a9302985e6098"
@@ -12431,6 +13016,43 @@ got@^12.1.0:
     p-cancelable "^3.0.0"
     responselike "^3.0.0"
 
+got@^6.2.0:
+  version "6.7.1"
+  resolved "https://registry.yarnpkg.com/got/-/got-6.7.1.tgz#240cd05785a9a18e561dc1b44b41c763ef1e8db0"
+  integrity sha512-Y/K3EDuiQN9rTZhBvPRWMLXIKdeD1Rj0nzunfoi0Yyn5WBEbzxXKU9Ub2X41oZBagVWOBU3MuDonFMgPWQFnwg==
+  dependencies:
+    create-error-class "^3.0.0"
+    duplexer3 "^0.1.4"
+    get-stream "^3.0.0"
+    is-redirect "^1.0.0"
+    is-retry-allowed "^1.0.0"
+    is-stream "^1.0.0"
+    lowercase-keys "^1.0.0"
+    safe-buffer "^5.0.1"
+    timed-out "^4.0.0"
+    unzip-response "^2.0.1"
+    url-parse-lax "^1.0.0"
+
+got@^7.0.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/got/-/got-7.1.0.tgz#05450fd84094e6bbea56f451a43a9c289166385a"
+  integrity sha512-Y5WMo7xKKq1muPsxD+KmrR8DH5auG7fBdDVueZwETwV6VytKyU9OX/ddpq2/1hp1vIPvVb4T81dKQz3BivkNLw==
+  dependencies:
+    decompress-response "^3.2.0"
+    duplexer3 "^0.1.4"
+    get-stream "^3.0.0"
+    is-plain-obj "^1.1.0"
+    is-retry-allowed "^1.0.0"
+    is-stream "^1.0.0"
+    isurl "^1.0.0-alpha5"
+    lowercase-keys "^1.0.0"
+    p-cancelable "^0.3.0"
+    p-timeout "^1.1.1"
+    safe-buffer "^5.0.1"
+    timed-out "^4.0.0"
+    url-parse-lax "^1.0.0"
+    url-to-options "^1.0.1"
+
 graceful-fs@4.2.10:
   version "4.2.10"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c"
@@ -12468,11 +13090,23 @@ gray-matter@^4.0.3:
     section-matter "^1.0.0"
     strip-bom-string "^1.0.0"
 
+grouped-queue@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/grouped-queue/-/grouped-queue-1.1.0.tgz#63e3f9ca90af952269d1d40879e41221eacc74cb"
+  integrity sha512-rZOFKfCqLhsu5VqjBjEWiwrYqJR07KxIkH4mLZlNlGDfntbb4FbMyGFP14TlvRPrU9S3Hnn/sgxbC5ZeN0no3Q==
+  dependencies:
+    lodash "^4.17.15"
+
 growl@1.10.5:
   version "1.10.5"
   resolved "https://registry.yarnpkg.com/growl/-/growl-1.10.5.tgz#f2735dc2283674fa67478b10181059355c369e5e"
   integrity sha512-qBr4OuELkhPenW6goKVXiv47US3clb3/IbuWF9KNKEijAy9oeHxU9IgzjvJhHkUzhaj7rOUD7+YGWqUjLp5oSA==
 
+growly@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
+  integrity sha512-+xGQY0YyAWCnqy7Cd++hc2JqMYzlm0dG30Jd0beaA64sROr8C4nt8Yc9V5Ro3avlSUDTN0ulqP/VBKi1/lLygw==
+
 gunzip-maybe@^1.4.2:
   version "1.4.2"
   resolved "https://registry.yarnpkg.com/gunzip-maybe/-/gunzip-maybe-1.4.2.tgz#b913564ae3be0eda6f3de36464837a9cd94b98ac"
@@ -12509,19 +13143,18 @@ handlebars@^4.7.7:
   optionalDependencies:
     uglify-js "^3.1.4"
 
-happy-dom@^16.3.0:
-  version "16.3.0"
-  resolved "https://registry.yarnpkg.com/happy-dom/-/happy-dom-16.3.0.tgz#e138b5692cdff8e1e25d02b7730d320b4a151f65"
-  integrity sha512-Q71RaIhyS21vhW17Tpa5W36yqQXIlE1TZ0A0Gguts8PShUSQE/7fBgxYGxgm3+5y0gF6afdlAVHLQqgrIcfRzg==
-  dependencies:
-    webidl-conversions "^7.0.0"
-    whatwg-mimetype "^3.0.0"
-
 hard-rejection@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/hard-rejection/-/hard-rejection-2.1.0.tgz#1c6eda5c1685c63942766d79bb40ae773cecd883"
   integrity sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==
 
+has-ansi@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
+  integrity sha512-C8vBJ8DwUCx19vhm7urhTuUsr4/IyP6l4VzNQDv+ryHQObW3TTTp9yB68WpYgRe2bbaGuZ/se74IqFeVnMnLZg==
+  dependencies:
+    ansi-regex "^2.0.0"
+
 has-bigints@^1.0.1, has-bigints@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.2.tgz#0871bd3e3d51626f6ca0966668ba35d5602d6eaa"
@@ -12549,11 +13182,23 @@ has-proto@^1.0.1, has-proto@^1.0.3:
   resolved "https://registry.yarnpkg.com/has-proto/-/has-proto-1.0.3.tgz#b31ddfe9b0e6e9914536a6ab286426d0214f77fd"
   integrity sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==
 
+has-symbol-support-x@^1.4.1:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/has-symbol-support-x/-/has-symbol-support-x-1.4.2.tgz#1409f98bc00247da45da67cee0a36f282ff26455"
+  integrity sha512-3ToOva++HaW+eCpgqZrCfN51IPB+7bJNVT6CUATzueB5Heb8o6Nam0V3HG5dlDvZU1Gn5QLcbahiKw/XVk5JJw==
+
 has-symbols@^1.0.2, has-symbols@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.3.tgz#bb7b2c4349251dce87b125f7bdf874aa7c8b39f8"
   integrity sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==
 
+has-to-string-tag-x@^1.2.0:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/has-to-string-tag-x/-/has-to-string-tag-x-1.4.1.tgz#a045ab383d7b4b2012a00148ab0aa5f290044d4d"
+  integrity sha512-vdbKfmw+3LoOYVr+mtxHaX5a96+0f3DljYd8JOqvOLsf5mw2Otda2qCDT9qRqLAhrjyQ0h7ual5nOiASpsGNFw==
+  dependencies:
+    has-symbol-support-x "^1.4.1"
+
 has-tostringtag@^1.0.0, has-tostringtag@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/has-tostringtag/-/has-tostringtag-1.0.2.tgz#2cdc42d40bef2e5b4eeab7c01a73c54ce7ab5abc"
@@ -12566,6 +13211,37 @@ has-unicode@^2.0.0:
   resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
   integrity sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==
 
+has-value@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/has-value/-/has-value-0.3.1.tgz#7b1f58bada62ca827ec0a2078025654845995e1f"
+  integrity sha512-gpG936j8/MzaeID5Yif+577c17TxaDmhuyVgSwtnL/q8UUTySg8Mecb+8Cf1otgLoD7DDH75axp86ER7LFsf3Q==
+  dependencies:
+    get-value "^2.0.3"
+    has-values "^0.1.4"
+    isobject "^2.0.0"
+
+has-value@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-value/-/has-value-1.0.0.tgz#18b281da585b1c5c51def24c930ed29a0be6b177"
+  integrity sha512-IBXk4GTsLYdQ7Rvt+GRBrFSVEkmuOUy4re0Xjd9kJSUQpnTrWR4/y9RpfexN9vkAPMFuQoeWKwqzPozRTlasGw==
+  dependencies:
+    get-value "^2.0.6"
+    has-values "^1.0.0"
+    isobject "^3.0.0"
+
+has-values@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/has-values/-/has-values-0.1.4.tgz#6d61de95d91dfca9b9a02089ad384bff8f62b771"
+  integrity sha512-J8S0cEdWuQbqD9//tlZxiMuMNmxB8PlEwvYwuxsTmR1G5RXUePEX/SJn7aD0GMLieuZYSwNH0cQuJGwnYunXRQ==
+
+has-values@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-values/-/has-values-1.0.0.tgz#95b0b63fec2146619a6fe57fe75628d5a39efe4f"
+  integrity sha512-ODYZC64uqzmtfGMEAX/FvZiRyWLpAC3vYnNunURUnkGVTS+mI0smVsWaPydRBsE3g+ok7h960jChO8mFcWlHaQ==
+  dependencies:
+    is-number "^3.0.0"
+    kind-of "^4.0.0"
+
 has-yarn@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/has-yarn/-/has-yarn-3.0.0.tgz#c3c21e559730d1d3b57e28af1f30d06fac38147d"
@@ -12830,11 +13506,6 @@ he@^1.2.0:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
-hey-listen@^1.0.8:
-  version "1.0.8"
-  resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68"
-  integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==
-
 highlight.js@^10.4.1, highlight.js@~10.7.0:
   version "10.7.3"
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.7.3.tgz#697272e3991356e40c3cac566a74eef681756531"
@@ -12879,6 +13550,13 @@ hsluv@^0.1.0:
   resolved "https://registry.yarnpkg.com/hsluv/-/hsluv-0.1.0.tgz#29f40d49642bd56dd0c192122abcc723bb5c2d6c"
   integrity sha512-ERcanKLAszD2XN3Vh5r5Szkrv9q0oSTudmP0rkiKAGM/3NMc9FLmMZBB7TSqTaXJfSDBOreYTfjezCOYbRKqlw==
 
+html-encoding-sniffer@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz#42a6dc4fd33f00281176e8b23759ca4e4fa185f3"
+  integrity sha512-D5JbOMBIR/TVZkubHT+OyT2705QvogUW4IBn6nHd756OwieSF9aDYFj4dv6HHEVGYbHaLETa3WggZYWWMyy3ZQ==
+  dependencies:
+    whatwg-encoding "^1.0.5"
+
 html-entities@^2.3.2:
   version "2.5.2"
   resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-2.5.2.tgz#201a3cf95d3a15be7099521620d19dfb4f65359f"
@@ -13002,6 +13680,15 @@ http-parser-js@>=0.5.1:
   resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.5.8.tgz#af23090d9ac4e24573de6f6aecc9d84a48bf20e3"
   integrity sha512-SGeBX54F94Wgu5RH3X5jsDtf4eHyRogWX1XGT3b4HuW3tQPM4AaBzoUji/4AAJNXCEOWZ5O0DgZmJw1947gD5Q==
 
+http-proxy-agent@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/http-proxy-agent/-/http-proxy-agent-4.0.1.tgz#8a8c8ef7f5932ccf953c296ca8291b95aa74aa3a"
+  integrity sha512-k0zdNgqWTGA6aeIRVpvfVob4fL52dTfaehylg0Y4UvSySvOq/Y+BOyPrgpUrA7HylqvU8vIZGsRuXmspskV0Tg==
+  dependencies:
+    "@tootallnate/once" "1"
+    agent-base "6"
+    debug "4"
+
 http-proxy-agent@^7.0.2:
   version "7.0.2"
   resolved "https://registry.yarnpkg.com/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz#9a8b1f246866c028509486585f62b8f2c18c270e"
@@ -13039,6 +13726,11 @@ http-signature@~1.3.6:
     jsprim "^2.0.2"
     sshpk "^1.14.1"
 
+http2-client@^1.2.5:
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/http2-client/-/http2-client-1.3.5.tgz#20c9dc909e3cc98284dd20af2432c524086df181"
+  integrity sha512-EC2utToWl4RKfs5zd36Mxq7nzHHBuomZboI0yYL6Y0RmBgT7Sgkq4rQ0ezFTYoIsSs7Tm9SJe+o2FcAg6GBhGA==
+
 http2-wrapper@^2.1.10:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/http2-wrapper/-/http2-wrapper-2.2.1.tgz#310968153dcdedb160d8b72114363ef5fce1f64a"
@@ -13047,6 +13739,22 @@ http2-wrapper@^2.1.10:
     quick-lru "^5.1.1"
     resolve-alpn "^1.2.0"
 
+https-proxy-agent@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz#c59ef224a04fe8b754f3db0063a25ea30d0005d6"
+  integrity sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==
+  dependencies:
+    agent-base "6"
+    debug "4"
+
+https-proxy-agent@^7.0.4:
+  version "7.0.4"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-7.0.4.tgz#8e97b841a029ad8ddc8731f26595bad868cb4168"
+  integrity sha512-wlwpilI7YdjSkWaQ/7omYBMTliDcmCN8OLihO6I9B86g06lMyAoqgoDpV0XqoaPOKj+0DIdAvnsWfyAAhmimcg==
+  dependencies:
+    agent-base "^7.0.2"
+    debug "4"
+
 https-proxy-agent@^7.0.5:
   version "7.0.5"
   resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-7.0.5.tgz#9e8b5013873299e11fab6fd548405da2d6c602b2"
@@ -13107,7 +13815,7 @@ iconoir-react@^7.6.0:
   resolved "https://registry.yarnpkg.com/iconoir-react/-/iconoir-react-7.7.0.tgz#acb2a90919a3f26d48cc4f8a5b601c9e58a99b2d"
   integrity sha512-jKwbCZEJ3PtTDzxYga5pe9Jxg5Zvex0lK43DMS0VeHmJkLl+zSHolp6u5vW+hJzSxxxXE0Wy0P87CJBDGj3H7Q==
 
-iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4:
+iconv-lite@0.4.24, iconv-lite@^0.4.17, iconv-lite@^0.4.24, iconv-lite@^0.4.4:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
   integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
@@ -13138,6 +13846,16 @@ ignore-walk@^3.0.1:
   dependencies:
     minimatch "^3.0.4"
 
+ignore@^3.3.5:
+  version "3.3.10"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.10.tgz#0a97fb876986e8081c631160f8f9f389157f0043"
+  integrity sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==
+
+ignore@^4.0.3:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
+  integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
+
 ignore@^5.2.0, ignore@^5.2.4, ignore@^5.3.1:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.1.tgz#5073e554cd42c5b33b394375f538b8593e34d4ef"
@@ -13183,6 +13901,14 @@ import-lazy@^4.0.0:
   resolved "https://registry.yarnpkg.com/import-lazy/-/import-lazy-4.0.0.tgz#e8eb627483a0a43da3c03f3e35548be5cb0cc153"
   integrity sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==
 
+import-local@^3.0.2:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/import-local/-/import-local-3.2.0.tgz#c3d5c745798c02a6f8b897726aba5100186ee260"
+  integrity sha512-2SPlun1JUPWoM6t3F0dw0FkCF/jWY8kttcY4f599GLTSjh2OCuuhdTkJQsEcZzBqbXZGKMK2OqW1oZsjtf/gQA==
+  dependencies:
+    pkg-dir "^4.2.0"
+    resolve-cwd "^3.0.0"
+
 imurmurhash@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
@@ -13226,11 +13952,6 @@ ini@^1.3.4, ini@^1.3.5, ini@~1.3.0:
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
   integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
 
-ini@^4.1.3:
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/ini/-/ini-4.1.3.tgz#4c359675a6071a46985eb39b14e4a2c0ec98a795"
-  integrity sha512-X7rqawQBvfdjS10YU1y1YVreA3SsLrW9dX2CewP2EbBJM4ypVNLDkO5y04gejPwKIY9lR+7r9gn3rFPt/kmWFg==
-
 inline-style-parser@0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/inline-style-parser/-/inline-style-parser-0.1.1.tgz#ec8a3b429274e9c0a1f1c4ffa9453a7fef72cea1"
@@ -13249,6 +13970,44 @@ inline-style-prefixer@^7.0.0:
     css-in-js-utils "^3.1.0"
     fast-loops "^1.1.3"
 
+inquirer@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-5.2.0.tgz#db350c2b73daca77ff1243962e9f22f099685726"
+  integrity sha512-E9BmnJbAKLPGonz0HeWHtbKf+EeSP93paWO3ZYoUpq/aowXvYGjjCSuashhXPpzbArIjBbji39THkxTz9ZeEUQ==
+  dependencies:
+    ansi-escapes "^3.0.0"
+    chalk "^2.0.0"
+    cli-cursor "^2.1.0"
+    cli-width "^2.0.0"
+    external-editor "^2.1.0"
+    figures "^2.0.0"
+    lodash "^4.3.0"
+    mute-stream "0.0.7"
+    run-async "^2.2.0"
+    rxjs "^5.5.2"
+    string-width "^2.1.0"
+    strip-ansi "^4.0.0"
+    through "^2.3.6"
+
+inquirer@^7.1.0:
+  version "7.3.3"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-7.3.3.tgz#04d176b2af04afc157a83fd7c100e98ee0aad003"
+  integrity sha512-JG3eIAj5V9CwcGvuOmoo6LB9kbAYT8HXffUl6memuszlwDC/qvFAJw49XJ5NROSFNPxp3iQg1GqkFhaY/CR0IA==
+  dependencies:
+    ansi-escapes "^4.2.1"
+    chalk "^4.1.0"
+    cli-cursor "^3.1.0"
+    cli-width "^3.0.0"
+    external-editor "^3.0.3"
+    figures "^3.0.0"
+    lodash "^4.17.19"
+    mute-stream "0.0.8"
+    run-async "^2.4.0"
+    rxjs "^6.6.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+    through "^2.3.6"
+
 interactjs@^1.10.11:
   version "1.10.27"
   resolved "https://registry.yarnpkg.com/interactjs/-/interactjs-1.10.27.tgz#16499aba4987a5ccfdaddca7d1ba7bb1118e14d0"
@@ -13280,11 +14039,6 @@ interpret@^1.0.0:
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.4.0.tgz#665ab8bc4da27a774a40584e812e3e0fa45b1a1e"
   integrity sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==
 
-intersection-observer@^0.10.0:
-  version "0.10.0"
-  resolved "https://registry.yarnpkg.com/intersection-observer/-/intersection-observer-0.10.0.tgz#4d11d63c1ff67e21e62987be24d55218da1a1a69"
-  integrity sha512-fn4bQ0Xq8FTej09YC/jqKZwtijpvARlRp6wxL5WTA6yPe2YWSJ5RJh7Nm79rK2qB0wr6iDQzH60XGq5V/7u8YQ==
-
 invariant@^2.2.2, invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
@@ -13307,6 +14061,13 @@ is-absolute-url@^4.0.0:
   resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-4.0.1.tgz#16e4d487d4fded05cfe0685e53ec86804a5e94dc"
   integrity sha512-/51/TKE88Lmm7Gc4/8btclNXWS+g50wXhYJq8HWIBAGUBnoAdRu1aXeh364t/O7wXDAcTJDP8PNuNKWUDWie+A==
 
+is-accessor-descriptor@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-accessor-descriptor/-/is-accessor-descriptor-1.0.1.tgz#3223b10628354644b86260db29b3e693f5ceedd4"
+  integrity sha512-YBUanLI8Yoihw923YeFUS5fs0fF2f5TSFTNiYAAzhhDscDa3lEqYuz1pDOEP5KvX94I9ey3vsqjJcLVFVU+3QA==
+  dependencies:
+    hasown "^2.0.0"
+
 is-alphabetical@^1.0.0:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/is-alphabetical/-/is-alphabetical-1.0.4.tgz#9e7d6b94916be22153745d184c298cbf986a686d"
@@ -13408,6 +14169,13 @@ is-callable@^1.1.3, is-callable@^1.1.4, is-callable@^1.2.7:
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.7.tgz#3bc2a85ea742d9e36205dcacdd72ca1fdc51b055"
   integrity sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==
 
+is-ci@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
+  integrity sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==
+  dependencies:
+    ci-info "^2.0.0"
+
 is-ci@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-3.0.1.tgz#db6ecbed1bd659c43dac0f45661e7674103d1867"
@@ -13422,6 +14190,13 @@ is-core-module@^2.11.0, is-core-module@^2.13.0:
   dependencies:
     hasown "^2.0.2"
 
+is-data-descriptor@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-1.0.1.tgz#2109164426166d32ea38c405c1e0945d9e6a4eeb"
+  integrity sha512-bc4NlCDiCr28U4aEsQ3Qs2491gVq4V8G7MQyws968ImqjKuYtTJXrl7Vq7jsN7Ly/C3xj5KWFrY7sHNeDkAzXw==
+  dependencies:
+    hasown "^2.0.0"
+
 is-data-view@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-data-view/-/is-data-view-1.0.1.tgz#4b4d3a511b70f3dc26d42c03ca9ca515d847759f"
@@ -13451,17 +14226,40 @@ is-deflate@^1.0.0:
   resolved "https://registry.yarnpkg.com/is-deflate/-/is-deflate-1.0.0.tgz#c862901c3c161fb09dac7cdc7e784f80e98f2f14"
   integrity sha512-YDoFpuZWu1VRXlsnlYMzKyVRITXj7Ej/V9gXQ2/pAe7X1J7M/RNOqaIYi6qUn+B7nGyB9pDXrv02dsB58d2ZAQ==
 
+is-descriptor@^0.1.0:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-0.1.7.tgz#2727eb61fd789dcd5bdf0ed4569f551d2fe3be33"
+  integrity sha512-C3grZTvObeN1xud4cRWl366OMXZTj0+HGyk4hvfpx4ZHt1Pb60ANSXqCK7pdOTeUQpRzECBSTphqvD7U+l22Eg==
+  dependencies:
+    is-accessor-descriptor "^1.0.1"
+    is-data-descriptor "^1.0.1"
+
+is-descriptor@^1.0.0, is-descriptor@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-1.0.3.tgz#92d27cb3cd311c4977a4db47df457234a13cb306"
+  integrity sha512-JCNNGbwWZEVaSPtS45mdtrneRWJFp07LLmykxeFV5F6oBvNF8vHSfJuJgoT472pSfk+Mf8VnlrspaFBHWM8JAw==
+  dependencies:
+    is-accessor-descriptor "^1.0.1"
+    is-data-descriptor "^1.0.1"
+
 is-docker@^2.0.0, is-docker@^2.1.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.2.1.tgz#33eeabe23cfe86f14bde4408a02c0cfb853acdaa"
   integrity sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==
 
-is-extendable@^0.1.0:
+is-extendable@^0.1.0, is-extendable@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
   integrity sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==
 
-is-extglob@^2.1.1:
+is-extendable@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-1.0.1.tgz#a7470f9e426733d81bd81e1155264e3a3507cab4"
+  integrity sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==
+  dependencies:
+    is-plain-object "^2.0.4"
+
+is-extglob@^2.1.0, is-extglob@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
   integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==
@@ -13480,6 +14278,11 @@ is-fullwidth-code-point@^1.0.0:
   dependencies:
     number-is-nan "^1.0.0"
 
+is-fullwidth-code-point@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
+  integrity sha512-VHskAKYM8RfSFXwee5t5cbN5PZeq1Wrh6qd5bkyiXIf6UQcN6w/A0eXM9r6t8d+GYOh+o6ZhiEnb88LN/Y8m2w==
+
 is-fullwidth-code-point@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
@@ -13490,6 +14293,11 @@ is-fullwidth-code-point@^4.0.0:
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-4.0.0.tgz#fae3167c729e7463f8461ce512b080a49268aa88"
   integrity sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ==
 
+is-generator-fn@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-generator-fn/-/is-generator-fn-2.1.0.tgz#7d140adc389aaf3011a8f2a2a4cfa6faadffb118"
+  integrity sha512-cTIB4yPYL/Grw0EaSzASzg6bBy9gqCofvWN8okThAYIxKJZC+udlRAmGbM0XLeniEJSs8uEgHPGuHSe1XsOLSQ==
+
 is-generator-function@^1.0.10, is-generator-function@^1.0.7:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/is-generator-function/-/is-generator-function-1.0.10.tgz#f1558baf1ac17e0deea7c0415c438351ff2b3c72"
@@ -13497,6 +14305,13 @@ is-generator-function@^1.0.10, is-generator-function@^1.0.7:
   dependencies:
     has-tostringtag "^1.0.0"
 
+is-glob@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-3.1.0.tgz#7ba5ae24217804ac70707b96922567486cc3e84a"
+  integrity sha512-UFpDDrPgM6qpnFNI+rh/p3bUaq9hKLZN8bMUWzxmcnZVS3omf4IPK+BrewlnWjO1WmUsMYuSjKh4UJuV4+Lqmw==
+  dependencies:
+    is-extglob "^2.1.0"
+
 is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
@@ -13582,6 +14397,13 @@ is-number-object@^1.0.4:
   dependencies:
     has-tostringtag "^1.0.0"
 
+is-number@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
+  integrity sha512-4cboCqIpliH+mAvFNegjZQ4kgKc3ZUhQVr3HvWbSh5q3WH2v82ct+T2Y1hdU5Gdtorx/cLifQjqCbL7bpznLTg==
+  dependencies:
+    kind-of "^3.0.2"
+
 is-number@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
@@ -13597,6 +14419,11 @@ is-obj@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-2.0.0.tgz#473fb05d973705e3fd9620545018ca8e22ef4982"
   integrity sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==
 
+is-object@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-object/-/is-object-1.0.2.tgz#a56552e1c665c9e950b4a025461da87e72f86fcf"
+  integrity sha512-2rRIahhZr2UWb45fIOuvZGpFtz0TyOZLf32KxBbSoUCeZR495zCKlWUKKUByk3geS2eAs7ZAABt0Y/Rx0GiQGA==
+
 is-path-cwd@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/is-path-cwd/-/is-path-cwd-2.2.0.tgz#67d43b82664a7b5191fd9119127eb300048a9fdb"
@@ -13632,13 +14459,23 @@ is-plain-object@5.0.0, is-plain-object@^5.0.0:
   resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-5.0.0.tgz#4427f50ab3429e9025ea7d52e9043a9ef4159344"
   integrity sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==
 
-is-plain-object@^2.0.4:
+is-plain-object@^2.0.3, is-plain-object@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
   integrity sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==
   dependencies:
     isobject "^3.0.1"
 
+is-potential-custom-element-name@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz#171ed6f19e3ac554394edf78caa05784a45bebb5"
+  integrity sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==
+
+is-redirect@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-redirect/-/is-redirect-1.0.0.tgz#1d03dded53bd8db0f30c26e4f95d36fc7c87dc24"
+  integrity sha512-cr/SlUEe5zOGmzvj9bUyC4LVvkNVAXu4GytXLNMr1pny+a65MpQ9IJzFHD5vi7FyJgb4qt27+eS3TuQnqB+RQw==
+
 is-reference@^3.0.0:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/is-reference/-/is-reference-3.0.2.tgz#154747a01f45cd962404ee89d43837af2cba247c"
@@ -13659,11 +14496,23 @@ is-regexp@^1.0.0:
   resolved "https://registry.yarnpkg.com/is-regexp/-/is-regexp-1.0.0.tgz#fd2d883545c46bac5a633e7b9a09e87fa2cb5069"
   integrity sha512-7zjFAPO4/gwyQAAgRRmqeEeyIICSdmCqa3tsVHMdBzaXXRiqopZL4Cyghg/XulGWrtABTpbnYYzzIRffLkP4oA==
 
+is-retry-allowed@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/is-retry-allowed/-/is-retry-allowed-1.2.0.tgz#d778488bd0a4666a3be8a1482b9f2baafedea8b4"
+  integrity sha512-RUbUeKwvm3XG2VYamhJL1xFktgjvPzL0Hq8C+6yrWIswDy3BIXGqCxhxkc30N9jqK311gVU137K8Ei55/zVJRg==
+
 is-root@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-root/-/is-root-2.1.0.tgz#809e18129cf1129644302a4f8544035d51984a9c"
   integrity sha512-AGOriNp96vNBd3HtU+RzFEc75FfR5ymiYv8E553I71SCeXBiMsVDUtdio1OEFvrPyLIQ9tVR5RxXIFe5PUFjMg==
 
+is-scoped@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-scoped/-/is-scoped-1.0.0.tgz#449ca98299e713038256289ecb2b540dc437cb30"
+  integrity sha512-iT1y0qJcdqXnHe6SCtN9cOBPRiarw8Cy1EZkawW50dxO/7oHC6AYvs1tH4QbBbi7UC/vYY3BnRmbE0bFLwvUog==
+  dependencies:
+    scoped-regex "^1.0.0"
+
 is-set@^2.0.2, is-set@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.3.tgz#8ab209ea424608141372ded6e0cb200ef1d9d01d"
@@ -13676,6 +14525,11 @@ is-shared-array-buffer@^1.0.2, is-shared-array-buffer@^1.0.3:
   dependencies:
     call-bind "^1.0.7"
 
+is-stream@^1.0.0, is-stream@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
+  integrity sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==
+
 is-stream@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.1.tgz#fac1e3d53b97ad5a9d0ae9cef2389f5810a5c077"
@@ -13729,7 +14583,12 @@ is-unicode-supported@^1.1.0, is-unicode-supported@^1.3.0:
   resolved "https://registry.yarnpkg.com/is-unicode-supported/-/is-unicode-supported-1.3.0.tgz#d824984b616c292a2e198207d4a609983842f714"
   integrity sha512-43r2mRvz+8JRIKnWJ+3j8JtjRKZ6GmjzfaE/qiBJnikNnYv/6bagRJ1kUhNk8R5EX/GkobD+r+sfxCPJsiKBLQ==
 
-is-weakmap@^2.0.2:
+is-utf8@^0.2.0, is-utf8@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
+  integrity sha512-rMYPYvCzsXywIsldgLaSoPlw5PfoB/ssr7hY4pLfcodrA5M/eArza1a9VmTiNIBNMjOGr1Ow9mTyU2o69U6U9Q==
+
+is-weakmap@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.2.tgz#bf72615d649dfe5f699079c54b83e47d1ae19cfd"
   integrity sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==
@@ -13749,7 +14608,7 @@ is-weakset@^2.0.3:
     call-bind "^1.0.7"
     get-intrinsic "^1.2.4"
 
-is-windows@^1.0.0:
+is-windows@^1.0.0, is-windows@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
   integrity sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==
@@ -13771,27 +14630,41 @@ isarray@0.0.1:
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
   integrity sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==
 
+isarray@1.0.0, isarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
+  integrity sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==
+
 isarray@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
   integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
 
-isarray@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
-  integrity sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==
+isbinaryfile@^3.0.2:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/isbinaryfile/-/isbinaryfile-3.0.3.tgz#5d6def3edebf6e8ca8cae9c30183a804b5f8be80"
+  integrity sha512-8cJBL5tTd2OS0dM4jz07wQd5g0dCCqIhUxPIGtZfa5L6hWlvV5MHTITy/DBAsF+Oe2LS1X3krBUhNwaGUWpWxw==
+  dependencies:
+    buffer-alloc "^1.2.0"
+
+isbinaryfile@^4.0.0:
+  version "4.0.10"
+  resolved "https://registry.yarnpkg.com/isbinaryfile/-/isbinaryfile-4.0.10.tgz#0c5b5e30c2557a2f06febd37b7322946aaee42b3"
+  integrity sha512-iHrqe5shvBUcFbmZq9zOQHBoeOhZJu6RQGrDpBgenUm/Am+F3JM2MgQj+rK3Z601fzrL5gLZWtAPH2OBaSVcyw==
 
 isexe@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
   integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
 
-isexe@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/isexe/-/isexe-3.1.1.tgz#4a407e2bd78ddfb14bea0c27c6f7072dde775f0d"
-  integrity sha512-LpB/54B+/2J5hqQ7imZHfdU31OlgQqx7ZicVlkm9kzg9/w8GKLEcFfJl/t7DCEDueOyBAD6zCCwTO6Fzs0NoEQ==
+isobject@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"
+  integrity sha512-+OUdGJlgjOBZDfxnDjYYG6zp487z0JGNQq3cYQYg5f5hKR+syHMsaztzGeml/4kGG55CSpKSpWTY+jYGgsHLgA==
+  dependencies:
+    isarray "1.0.0"
 
-isobject@^3.0.1:
+isobject@^3.0.0, isobject@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
   integrity sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==
@@ -13806,6 +14679,27 @@ istanbul-lib-coverage@^3.0.0, istanbul-lib-coverage@^3.2.0:
   resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.2.tgz#2d166c4b0644d43a39f04bf6c2edd1e585f31756"
   integrity sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==
 
+istanbul-lib-instrument@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-4.0.3.tgz#873c6fff897450118222774696a3f28902d77c1d"
+  integrity sha512-BXgQl9kf4WTCPCCpmFGoJkz/+uhvm7h7PFKUYxh7qarQd3ER33vHG//qaE8eN25l07YqZPpHXU9I09l/RD5aGQ==
+  dependencies:
+    "@babel/core" "^7.7.5"
+    "@istanbuljs/schema" "^0.1.2"
+    istanbul-lib-coverage "^3.0.0"
+    semver "^6.3.0"
+
+istanbul-lib-instrument@^5.0.4:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-5.2.1.tgz#d10c8885c2125574e1c231cacadf955675e1ce3d"
+  integrity sha512-pzqtp31nLv/XFOzXGuvhCb8qhjmTVo5vjVk19XE4CRlSWz0KoeJ3bw9XsA7nOp9YBf4qHjwBxkDzKcME/J29Yg==
+  dependencies:
+    "@babel/core" "^7.12.3"
+    "@babel/parser" "^7.14.7"
+    "@istanbuljs/schema" "^0.1.2"
+    istanbul-lib-coverage "^3.2.0"
+    semver "^6.3.0"
+
 istanbul-lib-report@^3.0.0, istanbul-lib-report@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-3.0.1.tgz#908305bac9a5bd175ac6a74489eafd0fc2445a7d"
@@ -13815,7 +14709,16 @@ istanbul-lib-report@^3.0.0, istanbul-lib-report@^3.0.1:
     make-dir "^4.0.0"
     supports-color "^7.1.0"
 
-istanbul-reports@^3.1.6:
+istanbul-lib-source-maps@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-4.0.1.tgz#895f3a709fcfba34c6de5a42939022f3e4358551"
+  integrity sha512-n3s8EwkdFIJCG3BPKBYvskgXGoy88ARzvegkitk60NxRdwltLOTaH7CUiMRXvwYorl0Q712iEjcWB+fK/MrWVw==
+  dependencies:
+    debug "^4.1.1"
+    istanbul-lib-coverage "^3.0.0"
+    source-map "^0.6.1"
+
+istanbul-reports@^3.0.2, istanbul-reports@^3.1.6:
   version "3.1.7"
   resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-3.1.7.tgz#daed12b9e1dca518e15c056e1e537e741280fa0b"
   integrity sha512-BewmUXImeuRk2YY0PVbxgKAysvhRPUQE0h5QRM++nVWyubKGV0l8qQ5op8+B2DOmwSe63Jivj0BjkPQVf8fP5g==
@@ -13823,6 +14726,23 @@ istanbul-reports@^3.1.6:
     html-escaper "^2.0.0"
     istanbul-lib-report "^3.0.0"
 
+istextorbinary@^2.2.1, istextorbinary@^2.5.1:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/istextorbinary/-/istextorbinary-2.6.0.tgz#60776315fb0fa3999add276c02c69557b9ca28ab"
+  integrity sha512-+XRlFseT8B3L9KyjxxLjfXSLMuErKDsd8DBNrsaxoViABMEZlOSCstwmw0qpoFX3+U6yWU1yhLudAe6/lETGGA==
+  dependencies:
+    binaryextensions "^2.1.2"
+    editions "^2.2.0"
+    textextensions "^2.5.0"
+
+isurl@^1.0.0-alpha5:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/isurl/-/isurl-1.0.0.tgz#b27f4f49f3cdaa3ea44a0a5b7f3462e6edc39d67"
+  integrity sha512-1P/yWsxPlDtn7QeRD+ULKQPaIaN6yF368GZ2vDfv0AL0NwpStafjWCDDdn0k8wgFMWpVAqG7oJhxHnlud42i9w==
+  dependencies:
+    has-to-string-tag-x "^1.2.0"
+    is-object "^1.0.1"
+
 iterator.prototype@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/iterator.prototype/-/iterator.prototype-1.1.2.tgz#5e29c8924f01916cb9335f1ff80619dcff22b0c0"
@@ -13839,12 +14759,12 @@ itty-router@^5.0.9:
   resolved "https://registry.yarnpkg.com/itty-router/-/itty-router-5.0.17.tgz#e5a015756bfc420ea20f09da80935a7feb8c4ef8"
   integrity sha512-ZHnPI0OOyTTLuNp2FdciejYaK4Wl3ZV3O0yEm8njOGggh/k/ek3BL7X2I5YsCOfc5vLhIJgj3Z4pUtLs6k9Ucg==
 
-jackspeak@2.1.1, jackspeak@^3.1.2, jackspeak@^4.0.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/jackspeak/-/jackspeak-2.1.1.tgz#2a42db4cfbb7e55433c28b6f75d8b796af9669cd"
-  integrity sha512-juf9stUEwUaILepraGOWIJTLwg48bUnBmRqd2ln2Os1sW987zeoj/hzhbvRB95oMuS2ZTpjULmdwHNX4rzZIZw==
+jackspeak@^3.1.2:
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/jackspeak/-/jackspeak-3.4.3.tgz#8833a9d89ab4acde6188942bd1c53b6390ed5a8a"
+  integrity sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==
   dependencies:
-    cliui "^8.0.1"
+    "@isaacs/cliui" "^8.0.2"
   optionalDependencies:
     "@pkgjs/parseargs" "^0.11.0"
 
@@ -13858,6 +14778,336 @@ jake@^10.8.5:
     filelist "^1.0.4"
     minimatch "^3.1.2"
 
+jest-changed-files@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-26.6.2.tgz#f6198479e1cc66f22f9ae1e22acaa0b429c042d0"
+  integrity sha512-fDS7szLcY9sCtIip8Fjry9oGf3I2ht/QT21bAHm5Dmf0mD4X3ReNUf17y+bO6fR8WgbIZTlbyG1ak/53cbRzKQ==
+  dependencies:
+    "@jest/types" "^26.6.2"
+    execa "^4.0.0"
+    throat "^5.0.0"
+
+jest-cli@^26.6.3:
+  version "26.6.3"
+  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-26.6.3.tgz#43117cfef24bc4cd691a174a8796a532e135e92a"
+  integrity sha512-GF9noBSa9t08pSyl3CY4frMrqp+aQXFGFkf5hEPbh/pIUFYWMK6ZLTfbmadxJVcJrdRoChlWQsA2VkJcDFK8hg==
+  dependencies:
+    "@jest/core" "^26.6.3"
+    "@jest/test-result" "^26.6.2"
+    "@jest/types" "^26.6.2"
+    chalk "^4.0.0"
+    exit "^0.1.2"
+    graceful-fs "^4.2.4"
+    import-local "^3.0.2"
+    is-ci "^2.0.0"
+    jest-config "^26.6.3"
+    jest-util "^26.6.2"
+    jest-validate "^26.6.2"
+    prompts "^2.0.1"
+    yargs "^15.4.1"
+
+jest-config@^26.6.3:
+  version "26.6.3"
+  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-26.6.3.tgz#64f41444eef9eb03dc51d5c53b75c8c71f645349"
+  integrity sha512-t5qdIj/bCj2j7NFVHb2nFB4aUdfucDn3JRKgrZnplb8nieAirAzRSHP8uDEd+qV6ygzg9Pz4YG7UTJf94LPSyg==
+  dependencies:
+    "@babel/core" "^7.1.0"
+    "@jest/test-sequencer" "^26.6.3"
+    "@jest/types" "^26.6.2"
+    babel-jest "^26.6.3"
+    chalk "^4.0.0"
+    deepmerge "^4.2.2"
+    glob "^7.1.1"
+    graceful-fs "^4.2.4"
+    jest-environment-jsdom "^26.6.2"
+    jest-environment-node "^26.6.2"
+    jest-get-type "^26.3.0"
+    jest-jasmine2 "^26.6.3"
+    jest-regex-util "^26.0.0"
+    jest-resolve "^26.6.2"
+    jest-util "^26.6.2"
+    jest-validate "^26.6.2"
+    micromatch "^4.0.2"
+    pretty-format "^26.6.2"
+
+jest-diff@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-26.6.2.tgz#1aa7468b52c3a68d7d5c5fdcdfcd5e49bd164394"
+  integrity sha512-6m+9Z3Gv9wN0WFVasqjCL/06+EFCMTqDEUl/b87HYK2rAPTyfz4ZIuSlPhY51PIQRWx5TaxeF1qmXKe9gfN3sA==
+  dependencies:
+    chalk "^4.0.0"
+    diff-sequences "^26.6.2"
+    jest-get-type "^26.3.0"
+    pretty-format "^26.6.2"
+
+jest-docblock@^26.0.0:
+  version "26.0.0"
+  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-26.0.0.tgz#3e2fa20899fc928cb13bd0ff68bd3711a36889b5"
+  integrity sha512-RDZ4Iz3QbtRWycd8bUEPxQsTlYazfYn/h5R65Fc6gOfwozFhoImx+affzky/FFBuqISPTqjXomoIGJVKBWoo0w==
+  dependencies:
+    detect-newline "^3.0.0"
+
+jest-each@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-26.6.2.tgz#02526438a77a67401c8a6382dfe5999952c167cb"
+  integrity sha512-Mer/f0KaATbjl8MCJ+0GEpNdqmnVmDYqCTJYTvoo7rqmRiDllmp2AYN+06F93nXcY3ur9ShIjS+CO/uD+BbH4A==
+  dependencies:
+    "@jest/types" "^26.6.2"
+    chalk "^4.0.0"
+    jest-get-type "^26.3.0"
+    jest-util "^26.6.2"
+    pretty-format "^26.6.2"
+
+jest-environment-jsdom@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-26.6.2.tgz#78d09fe9cf019a357009b9b7e1f101d23bd1da3e"
+  integrity sha512-jgPqCruTlt3Kwqg5/WVFyHIOJHsiAvhcp2qiR2QQstuG9yWox5+iHpU3ZrcBxW14T4fe5Z68jAfLRh7joCSP2Q==
+  dependencies:
+    "@jest/environment" "^26.6.2"
+    "@jest/fake-timers" "^26.6.2"
+    "@jest/types" "^26.6.2"
+    "@types/node" "*"
+    jest-mock "^26.6.2"
+    jest-util "^26.6.2"
+    jsdom "^16.4.0"
+
+jest-environment-node@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-26.6.2.tgz#824e4c7fb4944646356f11ac75b229b0035f2b0c"
+  integrity sha512-zhtMio3Exty18dy8ee8eJ9kjnRyZC1N4C1Nt/VShN1apyXc8rWGtJ9lI7vqiWcyyXS4BVSEn9lxAM2D+07/Tag==
+  dependencies:
+    "@jest/environment" "^26.6.2"
+    "@jest/fake-timers" "^26.6.2"
+    "@jest/types" "^26.6.2"
+    "@types/node" "*"
+    jest-mock "^26.6.2"
+    jest-util "^26.6.2"
+
+jest-get-type@^26.3.0:
+  version "26.3.0"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-26.3.0.tgz#e97dc3c3f53c2b406ca7afaed4493b1d099199e0"
+  integrity sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig==
+
+jest-haste-map@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-26.6.2.tgz#dd7e60fe7dc0e9f911a23d79c5ff7fb5c2cafeaa"
+  integrity sha512-easWIJXIw71B2RdR8kgqpjQrbMRWQBgiBwXYEhtGUTaX+doCjBheluShdDMeR8IMfJiTqH4+zfhtg29apJf/8w==
+  dependencies:
+    "@jest/types" "^26.6.2"
+    "@types/graceful-fs" "^4.1.2"
+    "@types/node" "*"
+    anymatch "^3.0.3"
+    fb-watchman "^2.0.0"
+    graceful-fs "^4.2.4"
+    jest-regex-util "^26.0.0"
+    jest-serializer "^26.6.2"
+    jest-util "^26.6.2"
+    jest-worker "^26.6.2"
+    micromatch "^4.0.2"
+    sane "^4.0.3"
+    walker "^1.0.7"
+  optionalDependencies:
+    fsevents "^2.1.2"
+
+jest-jasmine2@^26.6.3:
+  version "26.6.3"
+  resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-26.6.3.tgz#adc3cf915deacb5212c93b9f3547cd12958f2edd"
+  integrity sha512-kPKUrQtc8aYwBV7CqBg5pu+tmYXlvFlSFYn18ev4gPFtrRzB15N2gW/Roew3187q2w2eHuu0MU9TJz6w0/nPEg==
+  dependencies:
+    "@babel/traverse" "^7.1.0"
+    "@jest/environment" "^26.6.2"
+    "@jest/source-map" "^26.6.2"
+    "@jest/test-result" "^26.6.2"
+    "@jest/types" "^26.6.2"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    co "^4.6.0"
+    expect "^26.6.2"
+    is-generator-fn "^2.0.0"
+    jest-each "^26.6.2"
+    jest-matcher-utils "^26.6.2"
+    jest-message-util "^26.6.2"
+    jest-runtime "^26.6.3"
+    jest-snapshot "^26.6.2"
+    jest-util "^26.6.2"
+    pretty-format "^26.6.2"
+    throat "^5.0.0"
+
+jest-leak-detector@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-26.6.2.tgz#7717cf118b92238f2eba65054c8a0c9c653a91af"
+  integrity sha512-i4xlXpsVSMeKvg2cEKdfhh0H39qlJlP5Ex1yQxwF9ubahboQYMgTtz5oML35AVA3B4Eu+YsmwaiKVev9KCvLxg==
+  dependencies:
+    jest-get-type "^26.3.0"
+    pretty-format "^26.6.2"
+
+jest-matcher-utils@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-26.6.2.tgz#8e6fd6e863c8b2d31ac6472eeb237bc595e53e7a"
+  integrity sha512-llnc8vQgYcNqDrqRDXWwMr9i7rS5XFiCwvh6DTP7Jqa2mqpcCBBlpCbn+trkG0KNhPu/h8rzyBkriOtBstvWhw==
+  dependencies:
+    chalk "^4.0.0"
+    jest-diff "^26.6.2"
+    jest-get-type "^26.3.0"
+    pretty-format "^26.6.2"
+
+jest-message-util@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-26.6.2.tgz#58173744ad6fc0506b5d21150b9be56ef001ca07"
+  integrity sha512-rGiLePzQ3AzwUshu2+Rn+UMFk0pHN58sOG+IaJbk5Jxuqo3NYO1U2/MIR4S1sKgsoYSXSzdtSa0TgrmtUwEbmA==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@jest/types" "^26.6.2"
+    "@types/stack-utils" "^2.0.0"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.4"
+    micromatch "^4.0.2"
+    pretty-format "^26.6.2"
+    slash "^3.0.0"
+    stack-utils "^2.0.2"
+
+jest-mock@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-26.6.2.tgz#d6cb712b041ed47fe0d9b6fc3474bc6543feb302"
+  integrity sha512-YyFjePHHp1LzpzYcmgqkJ0nm0gg/lJx2aZFzFy1S6eUqNjXsOqTK10zNRff2dNfssgokjkG65OlWNcIlgd3zew==
+  dependencies:
+    "@jest/types" "^26.6.2"
+    "@types/node" "*"
+
+jest-pnp-resolver@^1.2.2:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/jest-pnp-resolver/-/jest-pnp-resolver-1.2.3.tgz#930b1546164d4ad5937d5540e711d4d38d4cad2e"
+  integrity sha512-+3NpwQEnRoIBtx4fyhblQDPgJI0H1IEIkX7ShLUjPGA7TtUTvI1oiKi3SR4oBR0hQhQR80l4WAe5RrXBwWMA8w==
+
+jest-regex-util@^26.0.0:
+  version "26.0.0"
+  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-26.0.0.tgz#d25e7184b36e39fd466c3bc41be0971e821fee28"
+  integrity sha512-Gv3ZIs/nA48/Zvjrl34bf+oD76JHiGDUxNOVgUjh3j890sblXryjY4rss71fPtD/njchl6PSE2hIhvyWa1eT0A==
+
+jest-resolve-dependencies@^26.6.3:
+  version "26.6.3"
+  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-26.6.3.tgz#6680859ee5d22ee5dcd961fe4871f59f4c784fb6"
+  integrity sha512-pVwUjJkxbhe4RY8QEWzN3vns2kqyuldKpxlxJlzEYfKSvY6/bMvxoFrYYzUO1Gx28yKWN37qyV7rIoIp2h8fTg==
+  dependencies:
+    "@jest/types" "^26.6.2"
+    jest-regex-util "^26.0.0"
+    jest-snapshot "^26.6.2"
+
+jest-resolve@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-26.6.2.tgz#a3ab1517217f469b504f1b56603c5bb541fbb507"
+  integrity sha512-sOxsZOq25mT1wRsfHcbtkInS+Ek7Q8jCHUB0ZUTP0tc/c41QHriU/NunqMfCUWsL4H3MHpvQD4QR9kSYhS7UvQ==
+  dependencies:
+    "@jest/types" "^26.6.2"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.4"
+    jest-pnp-resolver "^1.2.2"
+    jest-util "^26.6.2"
+    read-pkg-up "^7.0.1"
+    resolve "^1.18.1"
+    slash "^3.0.0"
+
+jest-runner@^26.6.3:
+  version "26.6.3"
+  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-26.6.3.tgz#2d1fed3d46e10f233fd1dbd3bfaa3fe8924be159"
+  integrity sha512-atgKpRHnaA2OvByG/HpGA4g6CSPS/1LK0jK3gATJAoptC1ojltpmVlYC3TYgdmGp+GLuhzpH30Gvs36szSL2JQ==
+  dependencies:
+    "@jest/console" "^26.6.2"
+    "@jest/environment" "^26.6.2"
+    "@jest/test-result" "^26.6.2"
+    "@jest/types" "^26.6.2"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    emittery "^0.7.1"
+    exit "^0.1.2"
+    graceful-fs "^4.2.4"
+    jest-config "^26.6.3"
+    jest-docblock "^26.0.0"
+    jest-haste-map "^26.6.2"
+    jest-leak-detector "^26.6.2"
+    jest-message-util "^26.6.2"
+    jest-resolve "^26.6.2"
+    jest-runtime "^26.6.3"
+    jest-util "^26.6.2"
+    jest-worker "^26.6.2"
+    source-map-support "^0.5.6"
+    throat "^5.0.0"
+
+jest-runtime@^26.6.3:
+  version "26.6.3"
+  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-26.6.3.tgz#4f64efbcfac398331b74b4b3c82d27d401b8fa2b"
+  integrity sha512-lrzyR3N8sacTAMeonbqpnSka1dHNux2uk0qqDXVkMv2c/A3wYnvQ4EXuI013Y6+gSKSCxdaczvf4HF0mVXHRdw==
+  dependencies:
+    "@jest/console" "^26.6.2"
+    "@jest/environment" "^26.6.2"
+    "@jest/fake-timers" "^26.6.2"
+    "@jest/globals" "^26.6.2"
+    "@jest/source-map" "^26.6.2"
+    "@jest/test-result" "^26.6.2"
+    "@jest/transform" "^26.6.2"
+    "@jest/types" "^26.6.2"
+    "@types/yargs" "^15.0.0"
+    chalk "^4.0.0"
+    cjs-module-lexer "^0.6.0"
+    collect-v8-coverage "^1.0.0"
+    exit "^0.1.2"
+    glob "^7.1.3"
+    graceful-fs "^4.2.4"
+    jest-config "^26.6.3"
+    jest-haste-map "^26.6.2"
+    jest-message-util "^26.6.2"
+    jest-mock "^26.6.2"
+    jest-regex-util "^26.0.0"
+    jest-resolve "^26.6.2"
+    jest-snapshot "^26.6.2"
+    jest-util "^26.6.2"
+    jest-validate "^26.6.2"
+    slash "^3.0.0"
+    strip-bom "^4.0.0"
+    yargs "^15.4.1"
+
+jest-serializer@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-26.6.2.tgz#d139aafd46957d3a448f3a6cdabe2919ba0742d1"
+  integrity sha512-S5wqyz0DXnNJPd/xfIzZ5Xnp1HrJWBczg8mMfMpN78OJ5eDxXyf+Ygld9wX1DnUWbIbhM1YDY95NjR4CBXkb2g==
+  dependencies:
+    "@types/node" "*"
+    graceful-fs "^4.2.4"
+
+jest-snapshot@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-26.6.2.tgz#f3b0af1acb223316850bd14e1beea9837fb39c84"
+  integrity sha512-OLhxz05EzUtsAmOMzuupt1lHYXCNib0ECyuZ/PZOx9TrZcC8vL0x+DUG3TL+GLX3yHG45e6YGjIm0XwDc3q3og==
+  dependencies:
+    "@babel/types" "^7.0.0"
+    "@jest/types" "^26.6.2"
+    "@types/babel__traverse" "^7.0.4"
+    "@types/prettier" "^2.0.0"
+    chalk "^4.0.0"
+    expect "^26.6.2"
+    graceful-fs "^4.2.4"
+    jest-diff "^26.6.2"
+    jest-get-type "^26.3.0"
+    jest-haste-map "^26.6.2"
+    jest-matcher-utils "^26.6.2"
+    jest-message-util "^26.6.2"
+    jest-resolve "^26.6.2"
+    natural-compare "^1.4.0"
+    pretty-format "^26.6.2"
+    semver "^7.3.2"
+
+jest-util@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-26.6.2.tgz#907535dbe4d5a6cb4c47ac9b926f6af29576cbc1"
+  integrity sha512-MDW0fKfsn0OI7MS7Euz6h8HNDXVQ0gaM9uW6RjfDmd1DAFcaxX9OqIakHIqhbnmF08Cf2DLDG+ulq8YQQ0Lp0Q==
+  dependencies:
+    "@jest/types" "^26.6.2"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.4"
+    is-ci "^2.0.0"
+    micromatch "^4.0.2"
+
 jest-util@^29.7.0:
   version "29.7.0"
   resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-29.7.0.tgz#23c2b62bfb22be82b44de98055802ff3710fc0bc"
@@ -13870,6 +15120,40 @@ jest-util@^29.7.0:
     graceful-fs "^4.2.9"
     picomatch "^2.2.3"
 
+jest-validate@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-26.6.2.tgz#23d380971587150467342911c3d7b4ac57ab20ec"
+  integrity sha512-NEYZ9Aeyj0i5rQqbq+tpIOom0YS1u2MVu6+euBsvpgIme+FOfRmoC4R5p0JiAUpaFvFy24xgrpMknarR/93XjQ==
+  dependencies:
+    "@jest/types" "^26.6.2"
+    camelcase "^6.0.0"
+    chalk "^4.0.0"
+    jest-get-type "^26.3.0"
+    leven "^3.1.0"
+    pretty-format "^26.6.2"
+
+jest-watcher@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-26.6.2.tgz#a5b683b8f9d68dbcb1d7dae32172d2cca0592975"
+  integrity sha512-WKJob0P/Em2csiVthsI68p6aGKTIcsfjH9Gsx1f0A3Italz43e3ho0geSAVsmj09RWOELP1AZ/DXyJgOgDKxXQ==
+  dependencies:
+    "@jest/test-result" "^26.6.2"
+    "@jest/types" "^26.6.2"
+    "@types/node" "*"
+    ansi-escapes "^4.2.1"
+    chalk "^4.0.0"
+    jest-util "^26.6.2"
+    string-length "^4.0.1"
+
+jest-worker@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-26.6.2.tgz#7f72cbc4d643c365e27b9fd775f9d0eaa9c7a8ed"
+  integrity sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==
+  dependencies:
+    "@types/node" "*"
+    merge-stream "^2.0.0"
+    supports-color "^7.0.0"
+
 jest-worker@^27.4.5:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-27.5.1.tgz#8d146f0900e8973b106b6f73cc1e9a8cb86f8db0"
@@ -13889,6 +15173,15 @@ jest-worker@^29.4.3:
     merge-stream "^2.0.0"
     supports-color "^8.0.0"
 
+jest@^26.1.0:
+  version "26.6.3"
+  resolved "https://registry.yarnpkg.com/jest/-/jest-26.6.3.tgz#40e8fdbe48f00dfa1f0ce8121ca74b88ac9148ef"
+  integrity sha512-lGS5PXGAzR4RF7V5+XObhqz2KZIDUA1yD0DG6pBVmy10eh0ZIXQImRuzocsI/N2XZ1GrLFwTS27In2i2jlpq1Q==
+  dependencies:
+    "@jest/core" "^26.6.3"
+    import-local "^3.0.2"
+    jest-cli "^26.6.3"
+
 jiti@^1.20.0:
   version "1.21.6"
   resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.6.tgz#6c7f7398dd4b3142767f9a168af2f317a428d268"
@@ -13910,10 +15203,10 @@ jose@^5.1.3:
   resolved "https://registry.yarnpkg.com/jose/-/jose-5.6.3.tgz#415688bc84875461c86dfe271ea6029112a23e27"
   integrity sha512-1Jh//hEEwMhNYPDDLwXHa2ePWgWiFNNUadVmguAAw2IJ6sj9mNxV5tGXJNqlMkJAybF6Lgw1mISDxTePP/187g==
 
-jose@^5.9.3:
-  version "5.9.6"
-  resolved "https://registry.yarnpkg.com/jose/-/jose-5.9.6.tgz#77f1f901d88ebdc405e57cce08d2a91f47521883"
-  integrity sha512-AMlnetc9+CV9asI19zHmrgS/WYsWUwCn2R7RzlbJWD7F9eWYUTGyBmU9o6PxngtLGOiDGPRu+Uc4fhKzbpteZQ==
+joycon@^3.0.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/joycon/-/joycon-3.1.1.tgz#bce8596d6ae808f8b68168f5fc69280996894f03"
+  integrity sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw==
 
 js-cookie@^2.2.1:
   version "2.2.1"
@@ -13925,6 +15218,11 @@ js-file-download@^0.4.12:
   resolved "https://registry.yarnpkg.com/js-file-download/-/js-file-download-0.4.12.tgz#10c70ef362559a5b23cdbdc3bd6f399c3d91d821"
   integrity sha512-rML+NkoD08p5Dllpjo0ffy4jRHeY6Zsapvr/W86N7E0yuzAO6qa5X9+xog6zQNlH102J7IXljNY2FtS6Lj3ucg==
 
+js-levenshtein@^1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/js-levenshtein/-/js-levenshtein-1.1.6.tgz#c6cee58eb3550372df8deb85fad5ce66ce01d59d"
+  integrity sha512-X2BB11YZtrRqY4EnQcLX5Rh373zbK4alC1FW7D7MBhL2gtcC17cTnr6DmfHZeS0s2rTHjUTMMHfG7gO8SSdw+g==
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
@@ -13981,6 +15279,39 @@ jscodeshift@^0.15.1:
     temp "^0.8.4"
     write-file-atomic "^2.3.0"
 
+jsdom@^16.4.0:
+  version "16.7.0"
+  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-16.7.0.tgz#918ae71965424b197c819f8183a754e18977b710"
+  integrity sha512-u9Smc2G1USStM+s/x1ru5Sxrl6mPYCbByG1U/hUmqaVsm4tbNyS7CicOSRyuGQYZhTu0h84qkZZQ/I+dzizSVw==
+  dependencies:
+    abab "^2.0.5"
+    acorn "^8.2.4"
+    acorn-globals "^6.0.0"
+    cssom "^0.4.4"
+    cssstyle "^2.3.0"
+    data-urls "^2.0.0"
+    decimal.js "^10.2.1"
+    domexception "^2.0.1"
+    escodegen "^2.0.0"
+    form-data "^3.0.0"
+    html-encoding-sniffer "^2.0.1"
+    http-proxy-agent "^4.0.1"
+    https-proxy-agent "^5.0.0"
+    is-potential-custom-element-name "^1.0.1"
+    nwsapi "^2.2.0"
+    parse5 "6.0.1"
+    saxes "^5.0.1"
+    symbol-tree "^3.2.4"
+    tough-cookie "^4.0.0"
+    w3c-hr-time "^1.0.2"
+    w3c-xmlserializer "^2.0.0"
+    webidl-conversions "^6.1.0"
+    whatwg-encoding "^1.0.5"
+    whatwg-mimetype "^2.3.0"
+    whatwg-url "^8.5.0"
+    ws "^7.4.6"
+    xml-name-validator "^3.0.0"
+
 jsesc@^2.5.1:
   version "2.5.2"
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
@@ -14006,6 +15337,13 @@ json-parse-even-better-errors@^2.3.0, json-parse-even-better-errors@^2.3.1:
   resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
   integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
 
+json-pointer@0.6.2, json-pointer@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/json-pointer/-/json-pointer-0.6.2.tgz#f97bd7550be5e9ea901f8c9264c9d436a22a93cd"
+  integrity sha512-vLWcKbOaXlO+jvRy4qNd+TI1QUPZzfJj1tpJ3vAXDych5XJf93ftpUKe5pKCrzyIIwgBJcOcCVRUfqQP25afBw==
+  dependencies:
+    foreach "^2.0.4"
+
 json-schema-defaults-esm@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/json-schema-defaults-esm/-/json-schema-defaults-esm-1.0.4.tgz#97a4eb81a1502df850868ec461a40ddcec2f4fc9"
@@ -14084,6 +15422,11 @@ jsonify@^0.0.1:
   resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.1.tgz#2aa3111dae3d34a0f151c63f3a45d995d9420978"
   integrity sha512-2/Ki0GcmuqSrgFyelQq9M05y7PS0mEwuIzrf3f1fPqkVDVRvZrPZtVSMHxdgo8Aq0sxAOb/cr2aqqA3LeWHVPg==
 
+jsonparse@^1.2.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/jsonparse/-/jsonparse-1.3.1.tgz#3f4dae4a91fac315f71062f8521cc239f1366280"
+  integrity sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==
+
 jsprim@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-2.0.2.tgz#77ca23dbcd4135cd364800d22ff82c2185803d4d"
@@ -14119,14 +15462,12 @@ just-compact@3.2.0:
   resolved "https://registry.yarnpkg.com/just-compact/-/just-compact-3.2.0.tgz#2df81a24550d944cbfe06e55b1875c84f03fc428"
   integrity sha512-sOrec92s8U4hzuj8FhbwLYxgvqS+BqGoU+LjgqW0r1MpXLJ7xkKwiFnt5Jr9Se3A62DCJ18+14Jvc1euzmWwbA==
 
-katex@^0.16:
-  version "0.16.11"
-  resolved "https://registry.yarnpkg.com/katex/-/katex-0.16.11.tgz#4bc84d5584f996abece5f01c6ad11304276a33f5"
-  integrity sha512-RQrI8rlHY92OLf3rho/Ts8i/XvjgguEjOkO1BEXcU3N8BqPpSzBNwV/G0Ukr+P/l3ivvJUE/Fa/CwbS6HesGNQ==
-  dependencies:
-    commander "^8.3.0"
+just-extend@^4.0.2:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/just-extend/-/just-extend-4.2.1.tgz#ef5e589afb61e5d66b24eca749409a8939a8c744"
+  integrity sha512-g3UB796vUFIY90VIv/WX3L2c8CS2MdWUww3CNrYmqza1Fg0DURc2K/O4YrnklBdQarSJ/y8JnJYDGc+1iumQjg==
 
-katex@^0.16.9:
+katex@^0.16.4, katex@^0.16.9:
   version "0.16.10"
   resolved "https://registry.yarnpkg.com/katex/-/katex-0.16.10.tgz#6f81b71ac37ff4ec7556861160f53bc5f058b185"
   integrity sha512-ZiqaC04tp2O5utMsl2TEZTXxa6WSC4yo0fv5ML++D3QZv/vx2Mct0mTlRx3O+uUkjfuAgOkzsCmq5MiUEsDDdA==
@@ -14145,6 +15486,20 @@ khroma@^2.0.0:
   resolved "https://registry.yarnpkg.com/khroma/-/khroma-2.1.0.tgz#45f2ce94ce231a437cf5b63c2e886e6eb42bbbb1"
   integrity sha512-Ls993zuzfayK269Svk9hzpeGUKob/sIgZzyHYdjQoAdQetRKpOLj+k/QQQ/6Qi0Yz65mlROrfd+Ev+1+7dz9Kw==
 
+kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
+  integrity sha512-NOW9QQXMoZGg/oqnVNoNTTIFEIid1627WCffUBJEdMxYApq7mNE7CpzucIPc+ZQg25Phej7IJSmX3hO+oblOtQ==
+  dependencies:
+    is-buffer "^1.1.5"
+
+kind-of@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-4.0.0.tgz#20813df3d712928b207378691a45066fae72dd57"
+  integrity sha512-24XsCxmEbRwEDbz/qz3stgin8TTzZ1ESR56OMCN0ujYg+vRutNSiOj9bHH9u85DKgXguraugV5sFuvbD4FW/hw==
+  dependencies:
+    is-buffer "^1.1.5"
+
 kind-of@^6.0.0, kind-of@^6.0.2, kind-of@^6.0.3:
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
@@ -14192,6 +15547,13 @@ lazy-ass@1.6.0, lazy-ass@^1.6.0:
   resolved "https://registry.yarnpkg.com/lazy-ass/-/lazy-ass-1.6.0.tgz#7999655e8646c17f089fdd187d150d3324d54513"
   integrity sha512-cc8oEVoctTvsFZ/Oje/kGnHbpWHYBe8IAJe4C0QNc3t8uM/0Y8+erSz/7Y1ALuXTEZTMvxXwO6YbX1ey3ujiZw==
 
+lazy-cache@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-2.0.2.tgz#b9190a4f913354694840859f8a8f7084d8822264"
+  integrity sha512-7vp2Acd2+Kz4XkzxGxaB1FWOi8KjWIWsgdfD5MCb86DWvlLqhRPM+d6Pro3iNEL5VT9mstz5hKAlcd+QR6H3aA==
+  dependencies:
+    set-getter "^0.1.0"
+
 lazy-universal-dotenv@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/lazy-universal-dotenv/-/lazy-universal-dotenv-4.0.0.tgz#0b220c264e89a042a37181a4928cdd298af73422"
@@ -14201,6 +15563,13 @@ lazy-universal-dotenv@^4.0.0:
     dotenv "^16.0.0"
     dotenv-expand "^10.0.0"
 
+"legacy-swc-helpers@npm:@swc/helpers@=0.4.14":
+  version "0.4.14"
+  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.4.14.tgz#1352ac6d95e3617ccb7c1498ff019654f1e12a74"
+  integrity sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw==
+  dependencies:
+    tslib "^2.4.0"
+
 leven@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
@@ -14226,7 +15595,7 @@ lilconfig@2.1.0:
   resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.1.0.tgz#78e23ac89ebb7e1bfbf25b18043de756548e7f52"
   integrity sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==
 
-lilconfig@^3.1.1, lilconfig@^3.1.2:
+lilconfig@^3.0.0, lilconfig@^3.1.1:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-3.1.2.tgz#e4a7c3cb549e3a606c8dcc32e5ae1005e62c05cb"
   integrity sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==
@@ -14327,6 +15696,11 @@ load-json-file@^4.0.0:
     pify "^3.0.0"
     strip-bom "^3.0.0"
 
+load-tsconfig@^0.2.3:
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/load-tsconfig/-/load-tsconfig-0.2.5.tgz#453b8cd8961bfb912dea77eb6c168fe8cca3d3a1"
+  integrity sha512-IXO6OCs9yg8tMKzfPZ1YmheJbZCiEsnBdcB03l0OcfK9prKnJb96siuHCr5Fl37/yo9DnKU+TLpxzTUspw9shg==
+
 load-yaml-file@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/load-yaml-file/-/load-yaml-file-0.2.0.tgz#af854edaf2bea89346c07549122753c07372f64d"
@@ -14364,6 +15738,14 @@ local-pkg@^0.5.0:
     mlly "^1.4.2"
     pkg-types "^1.0.3"
 
+locate-path@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
+  integrity sha512-NCI2kiDkyR7VeEKm27Kda/iQHyKJe1Bu0FlTbYp3CqJu+9IFe9bLyAjMxf5ZDDbEg+iMPzB5zYyUTSm8wVTKmA==
+  dependencies:
+    p-locate "^2.0.0"
+    path-exists "^3.0.0"
+
 locate-path@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-3.0.0.tgz#dbec3b3ab759758071b58fe59fc41871af21400e"
@@ -14398,11 +15780,6 @@ lodash-es@^4.17.21:
   resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
   integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
 
-lodash.camelcase@^4.3.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
-  integrity sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==
-
 lodash.curry@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lodash.curry/-/lodash.curry-4.1.1.tgz#248e36072ede906501d75966200a86dab8b23170"
@@ -14443,26 +15820,33 @@ lodash.orderby@^4.6.0:
   resolved "https://registry.yarnpkg.com/lodash.orderby/-/lodash.orderby-4.6.0.tgz#e697f04ce5d78522f54d9338b32b81a3393e4eb3"
   integrity sha512-T0rZxKmghOOf5YPnn8EY5iLYeWCpZq8G41FfqoVHH5QDTAFaghJRmAdLiadEDq+ztgM2q5PjA+Z1fOwGrLgmtg==
 
+lodash.sortby@^4.7.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
+  integrity sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==
+
 lodash.startcase@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.startcase/-/lodash.startcase-4.4.0.tgz#9436e34ed26093ed7ffae1936144350915d9add8"
   integrity sha512-+WKqsK294HMSc2jEbNgpHpd0JfIBhp7rEV4aqXWqFr6AlXov+SlcgB1Fv01y2kGe3Gc8nMW7VA0SrGuSkRfIEg==
 
-lodash.throttle@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
-  integrity sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==
-
 lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==
 
-lodash@^4, lodash@^4.15.0, lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21:
+lodash@^4, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.3.0, lodash@^4.7.0:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
+log-symbols@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a"
+  integrity sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg==
+  dependencies:
+    chalk "^2.0.1"
+
 log-symbols@^4.0.0, log-symbols@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-4.1.0.tgz#3fbdbb95b4683ac9fc785111e792e558d4abd503"
@@ -14500,6 +15884,18 @@ log-update@^5.0.1:
     strip-ansi "^7.0.1"
     wrap-ansi "^8.0.1"
 
+lolex@^2.4.2:
+  version "2.7.5"
+  resolved "https://registry.yarnpkg.com/lolex/-/lolex-2.7.5.tgz#113001d56bfc7e02d56e36291cc5c413d1aa0733"
+  integrity sha512-l9x0+1offnKKIzYVjyXU2SiwhXDLekRzKyhnbyldPHvC7BvLPVpdNUNR2KeMAiCN2D/kLNttZgQD5WjSxuBx3Q==
+
+lolex@^5.0.1:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/lolex/-/lolex-5.1.2.tgz#953694d098ce7c07bc5ed6d0e42bc6c0c6d5a367"
+  integrity sha512-h4hmjAvHTmd+25JSwrtTIuwbKdwg5NzZVRMLn9saij4SZaepCrTCxPr35H/3bjwfMJtN+t3CX8672UIkglz28A==
+  dependencies:
+    "@sinonjs/commons" "^1.7.0"
+
 longest-streak@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/longest-streak/-/longest-streak-3.1.0.tgz#62fa67cd958742a1574af9f39866364102d90cd4"
@@ -14526,6 +15922,11 @@ lower-case@^2.0.2:
   dependencies:
     tslib "^2.0.3"
 
+lowercase-keys@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-1.0.1.tgz#6f9e30b47084d971a7c820ff15a6c5167b74c26f"
+  integrity sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==
+
 lowercase-keys@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-3.0.0.tgz#c5e7d442e37ead247ae9db117a9d0a467c89d4f2"
@@ -14544,11 +15945,6 @@ lru-cache@^10.2.0:
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.2.2.tgz#48206bc114c1252940c41b25b41af5b545aca878"
   integrity sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==
 
-lru-cache@^11.0.0:
-  version "11.0.1"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-11.0.1.tgz#3a732fbfedb82c5ba7bca6564ad3f42afcb6e147"
-  integrity sha512-CgeuL5uom6j/ZVrg7G/+1IXqRY8JXX4Hghfy5YE0EhoYQWvndP1kufu58cmZLNIDKnRhZrXfdS9urVWx98AipQ==
-
 lru-cache@^4.0.1:
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd"
@@ -14569,21 +15965,23 @@ lunr@^2.3.9:
   resolved "https://registry.yarnpkg.com/lunr/-/lunr-2.3.9.tgz#18b123142832337dd6e964df1a5a7707b25d35e1"
   integrity sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow==
 
-lz-string@^1.4.4, lz-string@^1.5.0:
+lz-string@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.5.0.tgz#c1ab50f77887b712621201ba9fd4e3a6ed099941"
   integrity sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==
 
-mafs@^0.20.0:
-  version "0.20.1"
-  resolved "https://registry.yarnpkg.com/mafs/-/mafs-0.20.1.tgz#d447f6ab05df03c901982c18dd9ef3f1663cfced"
-  integrity sha512-EOgHHsVxWq7oGmdUJhZJ+Fr3b37xP1i3EBWuQahy/3ZOiOo2xvxLd6KChF1Lf00b6xRvOFyixuHpWexBE8uffA==
+mafs@^0.17.1:
+  version "0.17.1"
+  resolved "https://registry.yarnpkg.com/mafs/-/mafs-0.17.1.tgz#86341daba19b38c306a5d60306bf9005fe93a78c"
+  integrity sha512-pMUeBUHLwjp4N/4oFkcPrlhP6uncIylZAaUa4OgEql8R2u5WdJ76/MishoPahakSCFYoyKVBJYI7i5c2/Y7nMw==
   dependencies:
-    "@use-gesture/react" "^10.2.27"
+    "@react-hook/resize-observer" "^1.2.6"
+    "@swc/helpers" "^0.4.14"
+    "@use-gesture/react" "^10.2.23"
     computer-modern "^0.1.2"
-    katex "^0.16"
+    katex "^0.16.4"
     tiny-invariant "^1.3.1"
-    use-resize-observer "^9"
+    use-resize-observer "^9.0.0"
 
 magic-string@^0.27.0:
   version "0.27.0"
@@ -14599,6 +15997,13 @@ magic-string@^0.30.0, magic-string@^0.30.5:
   dependencies:
     "@jridgewell/sourcemap-codec" "^1.4.15"
 
+make-dir@^1.1.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.3.0.tgz#79c1033b80515bd6d24ec9933e860ca75ee27f0c"
+  integrity sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==
+  dependencies:
+    pify "^3.0.0"
+
 make-dir@^2.0.0, make-dir@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
@@ -14607,7 +16012,7 @@ make-dir@^2.0.0, make-dir@^2.1.0:
     pify "^4.0.1"
     semver "^5.6.0"
 
-make-dir@^3.0.2:
+make-dir@^3.0.0, make-dir@^3.0.2:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
   integrity sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==
@@ -14626,6 +16031,18 @@ make-error@^1.1.1:
   resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.6.tgz#2eb2e37ea9b67c4891f684a1394799af484cf7a2"
   integrity sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==
 
+makeerror@1.0.12:
+  version "1.0.12"
+  resolved "https://registry.yarnpkg.com/makeerror/-/makeerror-1.0.12.tgz#3e5dd2079a82e812e983cc6610c4a2cb0eaa801a"
+  integrity sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg==
+  dependencies:
+    tmpl "1.0.5"
+
+map-cache@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/map-cache/-/map-cache-0.2.2.tgz#c32abd0bd6525d9b051645bb4f26ac5dc98a0dbf"
+  integrity sha512-8y/eV9QQZCiyn1SprXSrCmqJN0yNRATe+PO8ztwqrvrbdRLA3eYJF0yaR0YayLWkMbsQSKWS9N2gPcGEc4UsZg==
+
 map-obj@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d"
@@ -14646,6 +16063,18 @@ map-stream@~0.1.0:
   resolved "https://registry.yarnpkg.com/map-stream/-/map-stream-0.1.0.tgz#e56aa94c4c8055a16404a0674b78f215f7c8e194"
   integrity sha512-CkYQrPYZfWnu/DAmVCpTSX/xHpKZ80eKh2lAkyA6AJTef6bW+6JpbQZN5rofum7da+SyN1bi5ctTm+lTfcCW3g==
 
+map-visit@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/map-visit/-/map-visit-1.0.0.tgz#ecdca8f13144e660f1b5bd41f12f3479d98dfb8f"
+  integrity sha512-4y7uGv8bd2WdM9vpQsiQNo41Ln1NvhvDRuVt0k2JZQ+ezN2uaQes7lZeZ+QQUHOLQAtDaBJ+7wCbi+ab/KFs+w==
+  dependencies:
+    object-visit "^1.0.0"
+
+mark.js@^8.11.1:
+  version "8.11.1"
+  resolved "https://registry.yarnpkg.com/mark.js/-/mark.js-8.11.1.tgz#180f1f9ebef8b0e638e4166ad52db879beb2ffc5"
+  integrity sha512-1I+1qpDt4idfgLQG+BNWmrqku+7/2bi5nLf4YwF8y8zXvmfiTBY3PV3ZibfrjBueCByROpuBjLLFCajqkgYoLQ==
+
 markdown-extensions@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/markdown-extensions/-/markdown-extensions-2.0.0.tgz#34bebc83e9938cae16e0e017e4a9814a8330d3c4"
@@ -14661,11 +16090,21 @@ markdown-to-jsx@7.3.2:
   resolved "https://registry.yarnpkg.com/markdown-to-jsx/-/markdown-to-jsx-7.3.2.tgz#f286b4d112dad3028acc1e77dfe1f653b347e131"
   integrity sha512-B+28F5ucp83aQm+OxNrPkS8z0tMKaeHiy0lHJs3LqCyDQFtWuenaIrkaVTgAm1pf1AU85LXltva86hlaT17i8Q==
 
-marked@^4.3.0:
+marked@^4.0.15, marked@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/marked/-/marked-4.3.0.tgz#796362821b019f734054582038b116481b456cf3"
   integrity sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==
 
+mathjax-full@^3.2.2:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/mathjax-full/-/mathjax-full-3.2.2.tgz#43f02e55219db393030985d2b6537ceae82f1fa7"
+  integrity sha512-+LfG9Fik+OuI8SLwsiR02IVdjcnRCy5MufYLi0C3TdMT56L/pjB0alMVGgoWJF8pN9Rc7FESycZB9BMNWIid5w==
+  dependencies:
+    esm "^3.2.25"
+    mhchemparser "^4.1.0"
+    mj-context-menu "^0.6.1"
+    speech-rule-engine "^4.0.6"
+
 mdast-util-directive@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/mdast-util-directive/-/mdast-util-directive-3.0.0.tgz#3fb1764e705bbdf0afb0d3f889e4404c3e82561f"
@@ -14933,7 +16372,84 @@ media-typer@0.3.0:
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
   integrity sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==
 
-memfs@4.9.3:
+mem-fs-editor@^4.0.0:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/mem-fs-editor/-/mem-fs-editor-4.0.3.tgz#d282a0c4e0d796e9eff9d75661f25f68f389af53"
+  integrity sha512-tgWmwI/+6vwu6POan82dTjxEpwAoaj0NAFnghtVo/FcLK2/7IhPUtFUUYlwou4MOY6OtjTUJtwpfH1h+eSUziw==
+  dependencies:
+    commondir "^1.0.1"
+    deep-extend "^0.6.0"
+    ejs "^2.5.9"
+    glob "^7.0.3"
+    globby "^7.1.1"
+    isbinaryfile "^3.0.2"
+    mkdirp "^0.5.0"
+    multimatch "^2.0.0"
+    rimraf "^2.2.8"
+    through2 "^2.0.0"
+    vinyl "^2.0.1"
+
+mem-fs-editor@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/mem-fs-editor/-/mem-fs-editor-5.1.0.tgz#51972241640be8567680a04f7adaffe5fc603667"
+  integrity sha512-2Yt2GCYEbcotYbIJagmow4gEtHDqzpq5XN94+yAx/NT5+bGqIjkXnm3KCUQfE6kRfScGp9IZknScoGRKu8L78w==
+  dependencies:
+    commondir "^1.0.1"
+    deep-extend "^0.6.0"
+    ejs "^2.5.9"
+    glob "^7.0.3"
+    globby "^8.0.1"
+    isbinaryfile "^3.0.2"
+    mkdirp "^0.5.0"
+    multimatch "^2.0.0"
+    rimraf "^2.2.8"
+    through2 "^2.0.0"
+    vinyl "^2.0.1"
+
+mem-fs-editor@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/mem-fs-editor/-/mem-fs-editor-6.0.0.tgz#d63607cf0a52fe6963fc376c6a7aa52db3edabab"
+  integrity sha512-e0WfJAMm8Gv1mP5fEq/Blzy6Lt1VbLg7gNnZmZak7nhrBTibs+c6nQ4SKs/ZyJYHS1mFgDJeopsLAv7Ow0FMFg==
+  dependencies:
+    commondir "^1.0.1"
+    deep-extend "^0.6.0"
+    ejs "^2.6.1"
+    glob "^7.1.4"
+    globby "^9.2.0"
+    isbinaryfile "^4.0.0"
+    mkdirp "^0.5.0"
+    multimatch "^4.0.0"
+    rimraf "^2.6.3"
+    through2 "^3.0.1"
+    vinyl "^2.2.0"
+
+mem-fs-editor@^7.0.1:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/mem-fs-editor/-/mem-fs-editor-7.1.0.tgz#2a16f143228df87bf918874556723a7ee73bfe88"
+  integrity sha512-BH6QEqCXSqGeX48V7zu+e3cMwHU7x640NB8Zk8VNvVZniz+p4FK60pMx/3yfkzo6miI6G3a8pH6z7FeuIzqrzA==
+  dependencies:
+    commondir "^1.0.1"
+    deep-extend "^0.6.0"
+    ejs "^3.1.5"
+    glob "^7.1.4"
+    globby "^9.2.0"
+    isbinaryfile "^4.0.0"
+    mkdirp "^1.0.0"
+    multimatch "^4.0.0"
+    rimraf "^3.0.0"
+    through2 "^3.0.2"
+    vinyl "^2.2.1"
+
+mem-fs@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/mem-fs/-/mem-fs-1.2.0.tgz#5f29b2d02a5875cd14cd836c388385892d556cde"
+  integrity sha512-b8g0jWKdl8pM0LqAPdK9i8ERL7nYrzmJfRhxMiWH2uYdfYnb7uXnmwVb0ZGe7xyEl4lj+nLIU3yf4zPUT+XsVQ==
+  dependencies:
+    through2 "^3.0.0"
+    vinyl "^2.0.1"
+    vinyl-file "^3.0.0"
+
+memfs@4.9.3, memfs@^4.8.1:
   version "4.9.3"
   resolved "https://registry.yarnpkg.com/memfs/-/memfs-4.9.3.tgz#41a3218065fe3911d9eba836250c8f4e43f816bc"
   integrity sha512-bsYSSnirtYTWi1+OPMFb0M048evMKyUYe0EbtuGQgq6BVQM1g1W8/KIUJCCvjgI/El0j6Q4WsmMiBwLUBSw8LA==
@@ -14950,16 +16466,6 @@ memfs@^3.1.2, memfs@^3.4.3:
   dependencies:
     fs-monkey "^1.0.4"
 
-memfs@^4.9.3:
-  version "4.15.0"
-  resolved "https://registry.yarnpkg.com/memfs/-/memfs-4.15.0.tgz#481af5a4d807fc97b199985a11d5f06ac866a370"
-  integrity sha512-q9MmZXd2rRWHS6GU3WEm3HyiXZyyoA1DqdOhEq0lxPBmKb5S7IAOwX0RgUCwJfqjelDCySa5h8ujOy24LqsWcw==
-  dependencies:
-    "@jsonjoy.com/json-pack" "^1.0.3"
-    "@jsonjoy.com/util" "^1.3.0"
-    tree-dump "^1.0.1"
-    tslib "^2.0.0"
-
 memoizerific@^1.11.3:
   version "1.11.3"
   resolved "https://registry.yarnpkg.com/memoizerific/-/memoizerific-1.11.3.tgz#7c87a4646444c32d75438570905f2dbd1b1a805a"
@@ -14999,7 +16505,7 @@ merge-stream@^2.0.0:
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
   integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
 
-merge2@^1.3.0, merge2@^1.4.1:
+merge2@^1.2.3, merge2@^1.3.0, merge2@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
@@ -15035,6 +16541,11 @@ methods@~1.1.2:
   resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
   integrity sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==
 
+mhchemparser@^4.1.0:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/mhchemparser/-/mhchemparser-4.2.1.tgz#d73982e66bc06170a85b1985600ee9dabe157cb0"
+  integrity sha512-kYmyrCirqJf3zZ9t/0wGgRZ4/ZJw//VwaRVGA75C4nhE60vtnIzhl9J9ndkX/h6hxSN7pjg/cE0VxbnNM+bnDQ==
+
 micromark-core-commonmark@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/micromark-core-commonmark/-/micromark-core-commonmark-1.1.0.tgz#1386628df59946b2d39fb2edfd10f3e8e0a75bb8"
@@ -15627,6 +17138,25 @@ micromatch@4.0.5:
     braces "^3.0.2"
     picomatch "^2.3.1"
 
+micromatch@^3.1.10, micromatch@^3.1.4:
+  version "3.1.10"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.10.tgz#70859bc95c9840952f359a068a3fc49f9ecfac23"
+  integrity sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==
+  dependencies:
+    arr-diff "^4.0.0"
+    array-unique "^0.3.2"
+    braces "^2.3.1"
+    define-property "^2.0.2"
+    extend-shallow "^3.0.2"
+    extglob "^2.0.4"
+    fragment-cache "^0.2.1"
+    kind-of "^6.0.2"
+    nanomatch "^1.2.9"
+    object.pick "^1.3.0"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.2"
+
 micromatch@^4.0.2, micromatch@^4.0.4, micromatch@^4.0.5:
   version "4.0.7"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.7.tgz#33e8190d9fe474a9895525f5618eee136d46c2e5"
@@ -15640,11 +17170,6 @@ mime-db@1.52.0, "mime-db@>= 1.43.0 < 2":
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
   integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
 
-mime-db@^1.52.0:
-  version "1.53.0"
-  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.53.0.tgz#3cb63cd820fc29896d9d4e8c32ab4fcd74ccb447"
-  integrity sha512-oHlN/w+3MQ3rba9rqFr6V/ypF10LSkdwUysQL7GkXoTgIWeV+tcXGA852TBxH+gsh8UWoyhR1hKcoMJTuWflpg==
-
 mime-db@~1.33.0:
   version "1.33.0"
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.33.0.tgz#a3492050a5cb9b63450541e39d9788d2272783db"
@@ -15669,6 +17194,11 @@ mime@1.6.0:
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
   integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
 
+mimic-fn@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
+  integrity sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==
+
 mimic-fn@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
@@ -15679,6 +17209,11 @@ mimic-fn@^4.0.0:
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-4.0.0.tgz#60a90550d5cb0b239cca65d893b1a53b29871ecc"
   integrity sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==
 
+mimic-response@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-1.0.1.tgz#4923538878eef42063cb8a3e3b0798781487ab1b"
+  integrity sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==
+
 mimic-response@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-3.1.0.tgz#2d1d59af9c1b129815accc2c46a022a5ce1fa3c9"
@@ -15721,20 +17256,13 @@ minimatch@3.0.4:
   dependencies:
     brace-expansion "^1.1.7"
 
-minimatch@3.1.2, minimatch@^3.0.2, minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
+minimatch@3.1.2, minimatch@^3.0.0, minimatch@^3.0.2, minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
   integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
   dependencies:
     brace-expansion "^1.1.7"
 
-minimatch@^10.0.0:
-  version "10.0.1"
-  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-10.0.1.tgz#ce0521856b453c86e25f2c4c0d03e6ff7ddc440b"
-  integrity sha512-ethXTt3SGGR+95gudmqJ1eNhRO7eGEGIgYA9vnPatK4/etz2MEVDno5GMCibdMTuBMyElzIlgxMna3K94XDIDQ==
-  dependencies:
-    brace-expansion "^2.0.1"
-
 minimatch@^5.0.1, minimatch@^5.1.6:
   version "5.1.6"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-5.1.6.tgz#1cfcb8cf5522ea69952cd2af95ae09477f122a96"
@@ -15756,7 +17284,7 @@ minimatch@^9.0.0, minimatch@^9.0.4:
   dependencies:
     brace-expansion "^2.0.1"
 
-minimatch@^9.0.3, minimatch@^9.0.5:
+minimatch@^9.0.3:
   version "9.0.5"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.5.tgz#d74f9dd6b57d83d8e98cfb82133b03978bc929e5"
   integrity sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==
@@ -15777,7 +17305,7 @@ minimist@0.0.8:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
   integrity sha512-miQKw5Hv4NS1Psg2517mV4e4dYNaO3++hjAvLOAzKqZ61rH8NS1SK+vbfBWZ5PY/Me/bEWhUwqMghEW5Fb9T7Q==
 
-minimist@^1.2.0, minimist@^1.2.3, minimist@^1.2.5, minimist@^1.2.6, minimist@^1.2.8:
+minimist@^1.1.0, minimist@^1.1.1, minimist@^1.2.0, minimist@^1.2.3, minimist@^1.2.5, minimist@^1.2.6, minimist@^1.2.8:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
   integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
@@ -15827,6 +17355,14 @@ mitt@^3.0.0:
   resolved "https://registry.yarnpkg.com/mitt/-/mitt-3.0.1.tgz#ea36cf0cc30403601ae074c8f77b7092cdab36d1"
   integrity sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==
 
+mixin-deep@^1.2.0:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.2.tgz#1120b43dc359a785dce65b55b82e257ccf479566"
+  integrity sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==
+  dependencies:
+    for-in "^1.0.2"
+    is-extendable "^1.0.1"
+
 mixme@^0.5.1:
   version "0.5.10"
   resolved "https://registry.yarnpkg.com/mixme/-/mixme-0.5.10.tgz#d653b2984b75d9018828f1ea333e51717ead5f51"
@@ -15839,6 +17375,11 @@ mixpanel-browser@2.52.0:
   dependencies:
     rrweb "2.0.0-alpha.13"
 
+mj-context-menu@^0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/mj-context-menu/-/mj-context-menu-0.6.1.tgz#a043c5282bf7e1cf3821de07b13525ca6f85aa69"
+  integrity sha512-7NO5s6n10TIV96d4g2uDpG7ZDpIhMh0QNfGdJw/W47JswFcosz457wqz/b5sAKvl12sxINGFCn80NZHKwxQEXA==
+
 mkdirp-classic@^0.5.2, mkdirp-classic@^0.5.3:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz#fa10c9115cc6d8865be221ba47ee9bed78601113"
@@ -15851,14 +17392,14 @@ mkdirp@0.5.1:
   dependencies:
     minimist "0.0.8"
 
-mkdirp@^0.5.1, mkdirp@^0.5.5:
+mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@^0.5.5:
   version "0.5.6"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.6.tgz#7def03d2432dcae4ba1d611445c48396062255f6"
   integrity sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==
   dependencies:
     minimist "^1.2.6"
 
-mkdirp@^1.0.3:
+mkdirp@^1.0.0, mkdirp@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
@@ -15878,6 +17419,11 @@ mobx-persist-store@1.1.5:
   resolved "https://registry.yarnpkg.com/mobx-persist-store/-/mobx-persist-store-1.1.5.tgz#be53a01375ac70b4bd6954c4a913dfdbc1e34d59"
   integrity sha512-STVTfYErC4Vw58zbAiz/Em4bmwi2sa+zXudxHwRtJvwiEejrJ6W1FcFDRskZyjrGLNOcrT0dDK2VDplV2cgQig==
 
+mobx-react-lite@^3.4.0:
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/mobx-react-lite/-/mobx-react-lite-3.4.3.tgz#3a4c22c30bfaa8b1b2aa48d12b2ba811c0947ab7"
+  integrity sha512-NkJREyFTSUXR772Qaai51BnE1voWx56LOL80xG7qkZr6vo8vEaLF3sz1JNUVh+rxmUzxYaqOhfuxTfqUh0FXUg==
+
 mobx-react-lite@^4.0.5:
   version "4.0.7"
   resolved "https://registry.yarnpkg.com/mobx-react-lite/-/mobx-react-lite-4.0.7.tgz#f4e21e18d05c811010dcb1d3007e797924c4d90b"
@@ -15885,7 +17431,14 @@ mobx-react-lite@^4.0.5:
   dependencies:
     use-sync-external-store "^1.2.0"
 
-mobx@^6.12.0:
+mobx-react@^7.2.0:
+  version "7.6.0"
+  resolved "https://registry.yarnpkg.com/mobx-react/-/mobx-react-7.6.0.tgz#ebf0456728a9bd2e5c24fdcf9b36e285a222a7d6"
+  integrity sha512-+HQUNuh7AoQ9ZnU6c4rvbiVVl+wEkb9WqYsVDzGLng+Dqj1XntHu79PvEWKtSMoMj67vFp/ZPXcElosuJO8ckA==
+  dependencies:
+    mobx-react-lite "^3.4.0"
+
+mobx@^6.0.4, mobx@^6.12.0:
   version "6.12.4"
   resolved "https://registry.yarnpkg.com/mobx/-/mobx-6.12.4.tgz#a1e176cd173bf45d3e5eb825eaff2c736c0a90cb"
   integrity sha512-uIymg89x+HmItX1p3MG+d09irn2k63J6biftZ5Ok+UpNojS1I3NJPLfcmJT9ANnUltNlHi+HQqrVyxiAN8ISYg==
@@ -15933,7 +17486,7 @@ mocha@^5.0.0:
     mkdirp "0.5.1"
     supports-color "5.4.0"
 
-moment@^2.13.0:
+moment@^2.13.0, moment@^2.15.1, moment@^2.24.0:
   version "2.30.1"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.30.1.tgz#f8c91c07b7a786e30c59926df530b4eac96974ae"
   integrity sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==
@@ -15976,14 +17529,54 @@ multicast-dns@^7.2.5:
     dns-packet "^5.2.2"
     thunky "^1.0.2"
 
-nan@^2.14.0, nan@^2.17.0, nan@^2.18.0:
-  version "2.20.0"
-  resolved "https://registry.yarnpkg.com/nan/-/nan-2.20.0.tgz#08c5ea813dd54ed16e5bd6505bf42af4f7838ca3"
-  integrity sha512-bk3gXBZDGILuuo/6sKtr0DQmSThYHLtNCdSdXk9YkxD/jK6X2vmCyyXBBxyqZ4XcnzTyYEAThfX3DCEnLf6igw==
+multimatch@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/multimatch/-/multimatch-2.1.0.tgz#9c7906a22fb4c02919e2f5f75161b4cdbd4b2a2b"
+  integrity sha512-0mzK8ymiWdehTBiJh0vClAzGyQbdtyWqzSVx//EK4N/D+599RFlGfTAsKw2zMSABtDG9C6Ul2+t8f2Lbdjf5mA==
+  dependencies:
+    array-differ "^1.0.0"
+    array-union "^1.0.1"
+    arrify "^1.0.0"
+    minimatch "^3.0.0"
 
-nano-css@^5.3.1:
-  version "5.6.1"
-  resolved "https://registry.yarnpkg.com/nano-css/-/nano-css-5.6.1.tgz#964120cb1af6cccaa6d0717a473ccd876b34c197"
+multimatch@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/multimatch/-/multimatch-4.0.0.tgz#8c3c0f6e3e8449ada0af3dd29efb491a375191b3"
+  integrity sha512-lDmx79y1z6i7RNx0ZGCPq1bzJ6ZoDDKbvh7jxr9SJcWLkShMzXrHbYVpTdnhNM5MXpDUxCQ4DgqVttVXlBgiBQ==
+  dependencies:
+    "@types/minimatch" "^3.0.3"
+    array-differ "^3.0.0"
+    array-union "^2.1.0"
+    arrify "^2.0.1"
+    minimatch "^3.0.4"
+
+mute-stream@0.0.7:
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
+  integrity sha512-r65nCZhrbXXb6dXOACihYApHw2Q6pV0M3V0PSxd74N0+D8nzAdEAITq2oAjA1jVnKI+tGvEBUpqiMh0+rW6zDQ==
+
+mute-stream@0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d"
+  integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==
+
+mz@^2.7.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/mz/-/mz-2.7.0.tgz#95008057a56cafadc2bc63dde7f9ff6955948e32"
+  integrity sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==
+  dependencies:
+    any-promise "^1.0.0"
+    object-assign "^4.0.1"
+    thenify-all "^1.0.0"
+
+nan@^2.14.0, nan@^2.17.0, nan@^2.18.0:
+  version "2.20.0"
+  resolved "https://registry.yarnpkg.com/nan/-/nan-2.20.0.tgz#08c5ea813dd54ed16e5bd6505bf42af4f7838ca3"
+  integrity sha512-bk3gXBZDGILuuo/6sKtr0DQmSThYHLtNCdSdXk9YkxD/jK6X2vmCyyXBBxyqZ4XcnzTyYEAThfX3DCEnLf6igw==
+
+nano-css@^5.3.1:
+  version "5.6.1"
+  resolved "https://registry.yarnpkg.com/nano-css/-/nano-css-5.6.1.tgz#964120cb1af6cccaa6d0717a473ccd876b34c197"
   integrity sha512-T2Mhc//CepkTa3X4pUhKgbEheJHYAxD0VptuqFhDbGMUWVV2m+lkNiW/Ieuj35wrfC8Zm0l7HvssQh7zcEttSw==
   dependencies:
     "@jridgewell/sourcemap-codec" "^1.4.15"
@@ -16000,6 +17593,28 @@ nanoid@^3.3.6, nanoid@^3.3.7:
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
   integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
 
+nanoid@^5.0.7:
+  version "5.0.7"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-5.0.7.tgz#6452e8c5a816861fd9d2b898399f7e5fd6944cc6"
+  integrity sha512-oLxFY2gd2IqnjcYyOXD8XGCftpGtZP2AbHbOkthDkvRywH5ayNtPVy9YlOPcHckXzbLTCHpkb7FB+yuxKV13pQ==
+
+nanomatch@^1.2.9:
+  version "1.2.13"
+  resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
+  integrity sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==
+  dependencies:
+    arr-diff "^4.0.0"
+    array-unique "^0.3.2"
+    define-property "^2.0.2"
+    extend-shallow "^3.0.2"
+    fragment-cache "^0.2.1"
+    is-windows "^1.0.2"
+    kind-of "^6.0.2"
+    object.pick "^1.3.0"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.1"
+
 napi-build-utils@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/napi-build-utils/-/napi-build-utils-1.0.2.tgz#b1fddc0b2c46e380a0b7a76f984dd47c41a13806"
@@ -16029,12 +17644,12 @@ neo-async@^2.5.0, neo-async@^2.6.2:
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
 
-next-auth@5.0.0-beta.25:
-  version "5.0.0-beta.25"
-  resolved "https://registry.yarnpkg.com/next-auth/-/next-auth-5.0.0-beta.25.tgz#3a9f9734e1d8fa5ced545360f1afc24862cb92d5"
-  integrity sha512-2dJJw1sHQl2qxCrRk+KTQbeH+izFbGFPuJj5eGgBZFYyiYYtvlrBeUw1E/OJJxTRjuxbSYGnCTkUIRsIIW0bog==
+next-auth@5.0.0-beta.19:
+  version "5.0.0-beta.19"
+  resolved "https://registry.yarnpkg.com/next-auth/-/next-auth-5.0.0-beta.19.tgz#2f99d8d28c2ee6ee3c6ba48361e482935e267648"
+  integrity sha512-YHu1igcAxZPh8ZB7GIM93dqgY6gcAzq66FOhQFheAdOx1raxNcApt05nNyNCSB6NegSiyJ4XOPsaNow4pfDmsg==
   dependencies:
-    "@auth/core" "0.37.2"
+    "@auth/core" "0.32.0"
 
 next-themes@0.2.1:
   version "0.2.1"
@@ -16046,12 +17661,12 @@ next-tick@^1.1.0:
   resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.1.0.tgz#1836ee30ad56d67ef281b22bd199f709449b35eb"
   integrity sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==
 
-next@^14.2.20:
-  version "14.2.20"
-  resolved "https://registry.yarnpkg.com/next/-/next-14.2.20.tgz#99b551d87ca6505ce63074904cb31a35e21dac9b"
-  integrity sha512-yPvIiWsiyVYqJlSQxwmzMIReXn5HxFNq4+tlVQ812N1FbvhmE+fDpIAD7bcS2mGYQwPJ5vAsQouyme2eKsxaug==
+next@14.2.3:
+  version "14.2.3"
+  resolved "https://registry.yarnpkg.com/next/-/next-14.2.3.tgz#f117dd5d5f20c307e7b8e4f9c1c97d961008925d"
+  integrity sha512-dowFkFTR8v79NPJO4QsBUtxv0g9BrS/phluVpMAt2ku7H+cbcBJlopXjkWlwxrk/xGqMemr7JkGPGemPrLLX7A==
   dependencies:
-    "@next/env" "14.2.20"
+    "@next/env" "14.2.3"
     "@swc/helpers" "0.5.5"
     busboy "1.6.0"
     caniuse-lite "^1.0.30001579"
@@ -16059,21 +17674,32 @@ next@^14.2.20:
     postcss "8.4.31"
     styled-jsx "5.1.1"
   optionalDependencies:
-    "@next/swc-darwin-arm64" "14.2.20"
-    "@next/swc-darwin-x64" "14.2.20"
-    "@next/swc-linux-arm64-gnu" "14.2.20"
-    "@next/swc-linux-arm64-musl" "14.2.20"
-    "@next/swc-linux-x64-gnu" "14.2.20"
-    "@next/swc-linux-x64-musl" "14.2.20"
-    "@next/swc-win32-arm64-msvc" "14.2.20"
-    "@next/swc-win32-ia32-msvc" "14.2.20"
-    "@next/swc-win32-x64-msvc" "14.2.20"
+    "@next/swc-darwin-arm64" "14.2.3"
+    "@next/swc-darwin-x64" "14.2.3"
+    "@next/swc-linux-arm64-gnu" "14.2.3"
+    "@next/swc-linux-arm64-musl" "14.2.3"
+    "@next/swc-linux-x64-gnu" "14.2.3"
+    "@next/swc-linux-x64-musl" "14.2.3"
+    "@next/swc-win32-arm64-msvc" "14.2.3"
+    "@next/swc-win32-ia32-msvc" "14.2.3"
+    "@next/swc-win32-x64-msvc" "14.2.3"
 
 nice-try@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
   integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==
 
+nise@^1.3.3:
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/nise/-/nise-1.5.3.tgz#9d2cfe37d44f57317766c6e9408a359c5d3ac1f7"
+  integrity sha512-Ymbac/94xeIrMf59REBPOv0thr+CJVFMhrlAkW/gjCIE58BGQdCj0x7KRCb3yz+Ga2Rz3E9XXSvUyyxqqhjQAQ==
+  dependencies:
+    "@sinonjs/formatio" "^3.2.1"
+    "@sinonjs/text-encoding" "^0.7.1"
+    just-extend "^4.0.2"
+    lolex "^5.0.1"
+    path-to-regexp "^1.7.0"
+
 no-case@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/no-case/-/no-case-3.0.4.tgz#d361fd5c9800f558551a8369fc0dcd4662b6124d"
@@ -16124,12 +17750,19 @@ node-fetch-commonjs@^3.3.2:
     node-domexception "^1.0.0"
     web-streams-polyfill "^3.0.3"
 
+node-fetch-h2@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/node-fetch-h2/-/node-fetch-h2-2.3.0.tgz#c6188325f9bd3d834020bf0f2d6dc17ced2241ac"
+  integrity sha512-ofRW94Ab0T4AOh5Fk8t0h8OBWrmjb0SSB20xh1H8YnPV9EJ+f5AMoYSUQ2zgJ4Iq2HAK0I2l5/Nequ8YzFS3Hg==
+  dependencies:
+    http2-client "^1.2.5"
+
 node-fetch-native@^1.6.3:
   version "1.6.4"
   resolved "https://registry.yarnpkg.com/node-fetch-native/-/node-fetch-native-1.6.4.tgz#679fc8fd8111266d47d7e72c379f1bed9acff06e"
   integrity sha512-IhOigYzAKHd244OC0JIMIUrjzctirCmPkaIfhDeGcEETWof5zKYUW7e7MYvChGWh/4CJeXEgsRyGzuF334rOOQ==
 
-node-fetch@^2.0.0, node-fetch@^2.6.7:
+node-fetch@^2.0.0, node-fetch@^2.6.0, node-fetch@^2.6.1, node-fetch@^2.6.7:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.7.0.tgz#d0f0fa6e3e2dc1d27efcd8ad99d550bda94d187d"
   integrity sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==
@@ -16146,6 +17779,23 @@ node-gyp-build@^4.3.0:
   resolved "https://registry.yarnpkg.com/node-gyp-build/-/node-gyp-build-4.8.1.tgz#976d3ad905e71b76086f4f0b0d3637fe79b6cda5"
   integrity sha512-OSs33Z9yWr148JZcbZd5WiAXhh/n9z8TxQcdMhIOlpN9AhWpLfvVFO73+m77bBABQMaY9XSvIa+qk0jlI7Gcaw==
 
+node-int64@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"
+  integrity sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==
+
+node-notifier@^8.0.0:
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-8.0.2.tgz#f3167a38ef0d2c8a866a83e318c1ba0efeb702c5"
+  integrity sha512-oJP/9NAdd9+x2Q+rfphB2RJCHjod70RcRLjosiPMMu5gjIfwVnOUGq2nbTjTUbmy0DJ/tFIVT30+Qe3nzl4TJg==
+  dependencies:
+    growly "^1.3.0"
+    is-wsl "^2.2.0"
+    semver "^7.3.2"
+    shellwords "^0.1.1"
+    uuid "^8.3.0"
+    which "^2.0.2"
+
 node-pre-gyp@^0.13.0:
   version "0.13.0"
   resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.13.0.tgz#df9ab7b68dd6498137717838e4f92a33fc9daa42"
@@ -16162,16 +17812,18 @@ node-pre-gyp@^0.13.0:
     semver "^5.3.0"
     tar "^4"
 
+node-readfiles@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/node-readfiles/-/node-readfiles-0.2.0.tgz#dbbd4af12134e2e635c245ef93ffcf6f60673a5d"
+  integrity sha512-SU00ZarexNlE4Rjdm83vglt5Y9yiQ+XI1XpflWlb7q7UTN1JUItm69xMeiQCTxtTfnzt+83T8Cx+vI2ED++VDA==
+  dependencies:
+    es6-promise "^3.2.1"
+
 node-releases@^2.0.14:
   version "2.0.14"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.14.tgz#2ffb053bceb8b2be8495ece1ab6ce600c4461b0b"
   integrity sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==
 
-node-releases@^2.0.18:
-  version "2.0.18"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.18.tgz#f010e8d35e2fe8d6b2944f03f70213ecedc4ca3f"
-  integrity sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==
-
 non-layered-tidy-tree-layout@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/non-layered-tidy-tree-layout/-/non-layered-tidy-tree-layout-2.0.2.tgz#57d35d13c356643fc296a55fb11ac15e74da7804"
@@ -16195,6 +17847,13 @@ normalize-package-data@^2.3.2, normalize-package-data@^2.5.0:
     semver "2 || 3 || 4 || 5"
     validate-npm-package-license "^3.0.1"
 
+normalize-path@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.1.1.tgz#1ab28b556e198363a8c1a6f7e6fa20137fe6aed9"
+  integrity sha512-3pKJwH184Xo/lnH6oyP1q2pMd7HcypqqmRs91/6/i2CGtWwIKGCkOOMTm/zXbgTEWHw1uNpNi/igc3ePOYHb6w==
+  dependencies:
+    remove-trailing-separator "^1.0.1"
+
 normalize-path@^3.0.0, normalize-path@~3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
@@ -16215,6 +17874,18 @@ not@^0.1.0:
   resolved "https://registry.yarnpkg.com/not/-/not-0.1.0.tgz#c9691c1746c55dcfbe54cbd8bd4ff041bc2b519d"
   integrity sha512-5PDmaAsVfnWUgTUbJ3ERwn7u79Z0dYxN9ErxCpVJJqe2RK0PJ3z+iFUxuqjwtlDDegXvtWoxD/3Fzxox7tFGWA==
 
+npm-api@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/npm-api/-/npm-api-1.0.1.tgz#3def9b51afedca57db14ca0c970d92442d21c9c5"
+  integrity sha512-4sITrrzEbPcr0aNV28QyOmgn6C9yKiF8k92jn4buYAK8wmA5xo1qL3II5/gT1r7wxbXBflSduZ2K3FbtOrtGkA==
+  dependencies:
+    JSONStream "^1.3.5"
+    clone-deep "^4.0.1"
+    download-stats "^0.3.4"
+    moment "^2.24.0"
+    node-fetch "^2.6.0"
+    paged-request "^2.0.1"
+
 npm-bundled@^1.0.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.1.2.tgz#944c78789bd739035b70baa2ca5cc32b8d860bc1"
@@ -16251,6 +17922,13 @@ npm-run-all@^4.1.5:
     shell-quote "^1.6.1"
     string.prototype.padend "^3.0.0"
 
+npm-run-path@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
+  integrity sha512-lJxZYlT4DW/bRUtFh1MQIWqmLwQfAxnqWG4HhEdjMlkrJYnJn0Jrr2u3mgxqaWsdiBc76TYkTG/mhrnYTuzfHw==
+  dependencies:
+    path-key "^2.0.0"
+
 npm-run-path@^4.0.0, npm-run-path@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-4.0.1.tgz#b7ecd1e5ed53da8e37a55e1c2269e0b97ed748ea"
@@ -16292,6 +17970,11 @@ number-is-nan@^1.0.0:
   resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
   integrity sha512-4jbtZXNAsfZbAHiiqjLPBiCl16dES1zI4Hpzzxw61Tk+loF+sBDBKx1ICKKKwIqQ7M0mFn1TmkN7euSncWgHiQ==
 
+nwsapi@^2.2.0:
+  version "2.2.12"
+  resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.12.tgz#fb6af5c0ec35b27b4581eb3bbad34ec9e5c696f8"
+  integrity sha512-qXDmcVlZV4XRtKFzddidpfVP4oMSGhga+xdMc25mv8kaLUHtgzCDhUxkrN8exkGdTlLNaXj7CV3GtON7zuGZ+w==
+
 nypm@^0.3.8:
   version "0.3.8"
   resolved "https://registry.yarnpkg.com/nypm/-/nypm-0.3.8.tgz#a16b078b161be5885351e72cf0b97326973722bf"
@@ -16303,21 +17986,71 @@ nypm@^0.3.8:
     pathe "^1.1.2"
     ufo "^1.4.0"
 
-oauth4webapi@^2.10.4:
+oas-kit-common@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/oas-kit-common/-/oas-kit-common-1.0.8.tgz#6d8cacf6e9097967a4c7ea8bcbcbd77018e1f535"
+  integrity sha512-pJTS2+T0oGIwgjGpw7sIRU8RQMcUoKCDWFLdBqKB2BNmGpbBMH2sdqAaOXUg8OzonZHU0L7vfJu1mJFEiYDWOQ==
+  dependencies:
+    fast-safe-stringify "^2.0.7"
+
+oas-linter@^3.2.2:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/oas-linter/-/oas-linter-3.2.2.tgz#ab6a33736313490659035ca6802dc4b35d48aa1e"
+  integrity sha512-KEGjPDVoU5K6swgo9hJVA/qYGlwfbFx+Kg2QB/kd7rzV5N8N5Mg6PlsoCMohVnQmo+pzJap/F610qTodKzecGQ==
+  dependencies:
+    "@exodus/schemasafe" "^1.0.0-rc.2"
+    should "^13.2.1"
+    yaml "^1.10.0"
+
+oas-resolver@^2.5.6:
+  version "2.5.6"
+  resolved "https://registry.yarnpkg.com/oas-resolver/-/oas-resolver-2.5.6.tgz#10430569cb7daca56115c915e611ebc5515c561b"
+  integrity sha512-Yx5PWQNZomfEhPPOphFbZKi9W93CocQj18NlD2Pa4GWZzdZpSJvYwoiuurRI7m3SpcChrnO08hkuQDL3FGsVFQ==
+  dependencies:
+    node-fetch-h2 "^2.3.0"
+    oas-kit-common "^1.0.8"
+    reftools "^1.1.9"
+    yaml "^1.10.0"
+    yargs "^17.0.1"
+
+oas-schema-walker@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/oas-schema-walker/-/oas-schema-walker-1.1.5.tgz#74c3cd47b70ff8e0b19adada14455b5d3ac38a22"
+  integrity sha512-2yucenq1a9YPmeNExoUa9Qwrt9RFkjqaMAA1X+U7sbb0AqBeTIdMHky9SQQ6iN94bO5NW0W4TRYXerG+BdAvAQ==
+
+oas-validator@^5.0.8:
+  version "5.0.8"
+  resolved "https://registry.yarnpkg.com/oas-validator/-/oas-validator-5.0.8.tgz#387e90df7cafa2d3ffc83b5fb976052b87e73c28"
+  integrity sha512-cu20/HE5N5HKqVygs3dt94eYJfBi0TsZvPVXDhbXQHiEityDN+RROTleefoKRKKJ9dFAF2JBkDHgvWj0sjKGmw==
+  dependencies:
+    call-me-maybe "^1.0.1"
+    oas-kit-common "^1.0.8"
+    oas-linter "^3.2.2"
+    oas-resolver "^2.5.6"
+    oas-schema-walker "^1.1.5"
+    reftools "^1.1.9"
+    should "^13.2.1"
+    yaml "^1.10.0"
+
+oauth4webapi@^2.10.4, oauth4webapi@^2.9.0:
   version "2.11.1"
   resolved "https://registry.yarnpkg.com/oauth4webapi/-/oauth4webapi-2.11.1.tgz#8d79e6b0d54ead203094f185a11031f3f9978465"
   integrity sha512-aNzOnL98bL6izG97zgnZs1PFEyO4WDVRhz2Pd066NPak44w5ESLRCYmJIyey8avSBPOMtBjhF3ZDDm7bIb7UOg==
 
-oauth4webapi@^3.0.0:
-  version "3.1.4"
-  resolved "https://registry.yarnpkg.com/oauth4webapi/-/oauth4webapi-3.1.4.tgz#50695385cea8e7a43f3e2e23bc33ea27faece4a7"
-  integrity sha512-eVfN3nZNbok2s/ROifO0UAc5G8nRoLSbrcKJ09OqmucgnhXEfdIQOR4gq1eJH1rN3gV7rNw62bDEgftsgFtBEg==
-
-object-assign@^4.1.0, object-assign@^4.1.1:
+object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
   integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
 
+object-copy@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/object-copy/-/object-copy-0.1.0.tgz#7e7d858b781bd7c991a41ba975ed3812754e998c"
+  integrity sha512-79LYn6VAb63zgtmAteVOWo9Vdj71ZVBy3Pbse+VqxDpEP83XuujMrGqHIwAXJ5I/aM0zU7dIyIAhifVTPrNItQ==
+  dependencies:
+    copy-descriptor "^0.1.0"
+    define-property "^0.2.5"
+    kind-of "^3.0.3"
+
 object-inspect@^1.13.1:
   version "1.13.2"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.2.tgz#dea0088467fb991e67af4058147a24824a3043ff"
@@ -16336,6 +18069,13 @@ object-keys@^1.1.1:
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
   integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
 
+object-visit@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/object-visit/-/object-visit-1.0.1.tgz#f79c4493af0c5377b59fe39d395e41042dd045bb"
+  integrity sha512-GBaMwwAVK9qbQN3Scdo0OyvgPW7l3lnaVMj84uTOZlswkX0KpF6fyDBJhtTthf7pymztoN36/KEr1DyhF96zEA==
+  dependencies:
+    isobject "^3.0.0"
+
 object.assign@^4.1.0, object.assign@^4.1.4, object.assign@^4.1.5:
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.5.tgz#3a833f9ab7fdb80fc9e8d2300c803d216d8fdbb0"
@@ -16374,6 +18114,13 @@ object.hasown@^1.1.4:
     es-abstract "^1.23.2"
     es-object-atoms "^1.0.0"
 
+object.pick@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/object.pick/-/object.pick-1.3.0.tgz#87a10ac4c1694bd2e1cbf53591a66141fb5dd747"
+  integrity sha512-tqa/UMy/CCoYmj+H5qc07qvSL9dqcs/WZENZ1JbtWBlATP+iVOe778gE6MSijnyCnORzDuX6hU+LA4SZ09YjFQ==
+  dependencies:
+    isobject "^3.0.1"
+
 object.values@^1.1.6, object.values@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.2.0.tgz#65405a9d92cee68ac2d303002e0b8470a4d9ab1b"
@@ -16412,6 +18159,13 @@ once@^1.3.0, once@^1.3.1, once@^1.4.0:
   dependencies:
     wrappy "1"
 
+onetime@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/onetime/-/onetime-2.0.1.tgz#067428230fd67443b2794b22bba528b6867962d4"
+  integrity sha512-oyyPpiMaKARvvcgip+JV+7zci5L8D1W9RZIz2l1o08AM3pfspitVWnPt3mzHcBPp12oYMTy0pqrFs/C+m3EwsQ==
+  dependencies:
+    mimic-fn "^1.0.0"
+
 onetime@^5.1.0, onetime@^5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/onetime/-/onetime-5.1.2.tgz#d0e96ebb56b07476df1dd9c4806e5237985ca45e"
@@ -16450,6 +18204,14 @@ openapi-path-templating@^1.5.1:
   dependencies:
     apg-lite "^1.0.3"
 
+openapi-sampler@^1.3.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/openapi-sampler/-/openapi-sampler-1.5.1.tgz#2b0145179abb0d75eaf50c82b86ef044d22bd671"
+  integrity sha512-tIWIrZUKNAsbqf3bd9U1oH6JEXo8LNYuDlXw26By67EygpjT+ArFnsxxyTMjFWRfbqo5ozkvgSQDK69Gd8CddA==
+  dependencies:
+    "@types/json-schema" "^7.0.7"
+    json-pointer "0.6.2"
+
 openapi-server-url-templating@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/openapi-server-url-templating/-/openapi-server-url-templating-1.1.0.tgz#cae9c36d12feeec6af158a6c42e46205db125be6"
@@ -16539,21 +18301,21 @@ outdent@^0.5.0:
   resolved "https://registry.yarnpkg.com/outdent/-/outdent-0.5.0.tgz#9e10982fdc41492bb473ad13840d22f9655be2ff"
   integrity sha512-/jHxFIzoMXdqPzTaCpFzAAWhpkSjZPF4Vsn6jAfNpmbH/ymsmd7Qc6VE9BGn0L6YMj6uwpQLxCECpus4ukKS9Q==
 
-outvariant@1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/outvariant/-/outvariant-1.4.0.tgz#e742e4bda77692da3eca698ef5bfac62d9fba06e"
-  integrity sha512-AlWY719RF02ujitly7Kk/0QlV+pXGFDHrHf9O2OKqyqgBieaPOIeuSkL8sRK6j2WK+/ZAURq2kZsY0d8JapUiw==
-
-outvariant@^1.3.0, outvariant@^1.4.0:
-  version "1.4.3"
-  resolved "https://registry.yarnpkg.com/outvariant/-/outvariant-1.4.3.tgz#221c1bfc093e8fec7075497e7799fdbf43d14873"
-  integrity sha512-+Sl2UErvtsoajRDKCE5/dBz4DIvHXQQnAxtQTF04OJxY0+DyZXSo5P5Bb7XYWOh81syohlYL24hbDwxedPUJCA==
+p-cancelable@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/p-cancelable/-/p-cancelable-0.3.0.tgz#b9e123800bcebb7ac13a479be195b507b98d30fa"
+  integrity sha512-RVbZPLso8+jFeq1MfNvgXtCRED2raz/dKpacfTNxsx6pLEpEomM7gah6VeHSYV3+vo0OAi4MkArtQcWWXuQoyw==
 
 p-cancelable@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/p-cancelable/-/p-cancelable-3.0.0.tgz#63826694b54d61ca1c20ebcb6d3ecf5e14cd8050"
   integrity sha512-mlVgR3PGuzlo0MmTdk4cXqXWlwQDLnONTAg6sm62XkMJEiRxN3GL3SffkYvqwonbkJBcrI7Uvv5Zh9yjvn2iUw==
 
+p-each-series@^2.1.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/p-each-series/-/p-each-series-2.2.0.tgz#105ab0357ce72b202a8a8b94933672657b5e2a9a"
+  integrity sha512-ycIL2+1V32th+8scbpTvyHNaHe02z0sjgh91XXjAk+ZeXoPN4Z46DVUnzdso0aX4KckKw0FNNFHdjZ2UsZvxiA==
+
 p-filter@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/p-filter/-/p-filter-2.1.0.tgz#1b1472562ae7a0f742f0f3d3d3718ea66ff9c09c"
@@ -16561,6 +18323,18 @@ p-filter@^2.1.0:
   dependencies:
     p-map "^2.0.0"
 
+p-finally@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
+  integrity sha512-LICb2p9CB7FS+0eR1oqWnHhp0FljGLZCWBE9aix0Uye9W8LTQPwMTYVGWQWIw9RdQiDg4+epXQODwIYJtSJaow==
+
+p-limit@^1.1.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.3.0.tgz#b86bd5f0c25690911c7590fcbfc2010d54b3ccb8"
+  integrity sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==
+  dependencies:
+    p-try "^1.0.0"
+
 p-limit@^2.0.0, p-limit@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1"
@@ -16589,6 +18363,13 @@ p-limit@^5.0.0:
   dependencies:
     yocto-queue "^1.0.0"
 
+p-locate@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-2.0.0.tgz#20a0103b222a70c8fd39cc2e580680f3dde5ec43"
+  integrity sha512-nQja7m7gSKuewoVRen45CtVfODR3crN3goVQ0DDZ9N3yHxgpkuBhZqsaiotSQRrADUrne346peY7kT3TSACykg==
+  dependencies:
+    p-limit "^1.1.0"
+
 p-locate@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-3.0.0.tgz#322d69a05c0264b25997d9f40cd8a891ab0064a4"
@@ -16637,7 +18418,19 @@ p-retry@^4.5.0:
     "@types/retry" "0.12.0"
     retry "^0.13.1"
 
-p-try@^2.0.0:
+p-timeout@^1.1.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/p-timeout/-/p-timeout-1.2.1.tgz#5eb3b353b7fce99f101a1038880bb054ebbea386"
+  integrity sha512-gb0ryzr+K2qFqFv6qi3khoeqMZF/+ajxQipEF6NteZVnvz9tzdsfAVj3lYtn1gAXvH5lfLwfxEII799gt/mRIA==
+  dependencies:
+    p-finally "^1.0.0"
+
+p-try@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-try/-/p-try-1.0.0.tgz#cbc79cdbaf8fd4228e13f621f2b1a237c1b207b3"
+  integrity sha512-U1etNYuMJoIz3ZXSrrySFjsXQTWOx2/jdi86L+2pRvph/qMKL6sbcCYdH23fqsbm8TH2Gn0OybpT4eSFlCVHww==
+
+p-try@^2.0.0, p-try@^2.1.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
   integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
@@ -16657,6 +18450,18 @@ package-json@^8.1.0:
     registry-url "^6.0.0"
     semver "^7.3.7"
 
+pad-component@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/pad-component/-/pad-component-0.0.1.tgz#ad1f22ce1bf0fdc0d6ddd908af17f351a404b8ac"
+  integrity sha512-8EKVBxCRSvLnsX1p2LlSFSH3c2/wuhY9/BXXWu8boL78FbVKqn2L5SpURt1x5iw6Gq8PTqJ7MdPoe5nCtX3I+g==
+
+paged-request@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/paged-request/-/paged-request-2.0.2.tgz#4d621a08b8d6bee4440a0a92112354eeece5b5b0"
+  integrity sha512-NWrGqneZImDdcMU/7vMcAOo1bIi5h/pmpJqe7/jdsy85BA/s5MSaU/KlpxwW/IVPmIwBcq2uKPrBWWhEWhtxag==
+  dependencies:
+    axios "^0.21.1"
+
 pako@~0.2.0:
   version "0.2.9"
   resolved "https://registry.yarnpkg.com/pako/-/pako-0.2.9.tgz#f3f7522f4ef782348da8161bad9ecfd51bf83a75"
@@ -16746,7 +18551,7 @@ parse5-htmlparser2-tree-adapter@^7.0.0:
     domhandler "^5.0.2"
     parse5 "^7.0.0"
 
-parse5@^6.0.1:
+parse5@6.0.1, parse5@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-6.0.1.tgz#e1a1c085c569b3dc08321184f19a39cc27f7c30b"
   integrity sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==
@@ -16771,6 +18576,11 @@ pascal-case@^3.1.2:
     no-case "^3.0.4"
     tslib "^2.0.3"
 
+pascalcase@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/pascalcase/-/pascalcase-0.1.1.tgz#b363e55e8006ca6fe21784d2db22bd15d7917f14"
+  integrity sha512-XHXfu/yOQRy9vYOtUDVMN60OEJjW013GoObG1o+xwQTpB9eYJX/BjXMsdW13ZDPruFhYYn0AG22w0xgQMwl3Nw==
+
 patch-package@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/patch-package/-/patch-package-8.0.0.tgz#d191e2f1b6e06a4624a0116bcb88edd6714ede61"
@@ -16792,6 +18602,16 @@ patch-package@^8.0.0:
     tmp "^0.0.33"
     yaml "^2.2.2"
 
+path-browserify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-1.0.1.tgz#d98454a9c3753d5790860f16f68867b9e46be1fd"
+  integrity sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==
+
+path-dirname@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/path-dirname/-/path-dirname-1.0.2.tgz#cc33d24d525e099a5388c0336c6e32b9160609e0"
+  integrity sha512-ALzNPpyNq9AqXMBjeymIjFDAkAFH06mHJH/cSBHAgU0s4vfpBn6b2nf8tiRLvagKD8RbTpq2FKTBg7cl9l3c7Q==
+
 path-exists@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
@@ -16817,7 +18637,7 @@ path-is-inside@1.0.2:
   resolved "https://registry.yarnpkg.com/path-is-inside/-/path-is-inside-1.0.2.tgz#365417dede44430d1c11af61027facf074bdfc53"
   integrity sha512-DUWJr3+ULp4zXmol/SZkFf3JGsS9/SIv+Y3Rt93/UjPpDpklB5f1er4O3POIbUuUJ3FXgqte2Q7SrU6zAqwk8w==
 
-path-key@^2.0.1:
+path-key@^2.0.0, path-key@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
   integrity sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw==
@@ -16845,14 +18665,6 @@ path-scurry@^1.11.1:
     lru-cache "^10.2.0"
     minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
 
-path-scurry@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/path-scurry/-/path-scurry-2.0.0.tgz#9f052289f23ad8bf9397a2a0425e7b8615c58580"
-  integrity sha512-ypGJsmGtdXUOeM5u93TyeIEfEhM6s+ljAhrk5vAvSx8uyY/02OvrZnA0YNGUrPXfpJMgI1ODd3nwz8Npx4O4cg==
-  dependencies:
-    lru-cache "^11.0.0"
-    minipass "^7.1.2"
-
 path-to-regexp@0.1.7:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
@@ -16887,10 +18699,10 @@ path-type@^5.0.0:
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-5.0.0.tgz#14b01ed7aea7ddf9c7c3f46181d4d04f9c785bb8"
   integrity sha512-5HviZNaZcfqP95rwpv+1HDgUamezbqdSYTyzjTvwtJSnIH+3vnbmWsItli8OFEndS984VT55M3jduxZbX351gg==
 
-path-unified@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/path-unified/-/path-unified-0.2.0.tgz#9094ca9cc7e573f037884f6bf8f3d621a2f68f29"
-  integrity sha512-MNKqvrKbbbb5p7XHXV6ZAsf/1f/yJQa13S/fcX0uua8ew58Tgc6jXV+16JyAbnR/clgCH+euKDxrF2STxMHdrg==
+path-unified@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/path-unified/-/path-unified-0.1.0.tgz#fd751e787ab019a88cdf5cecbd7e5e4711c66c7d"
+  integrity sha512-/Oaz9ZJforrkmFrwkR/AcvjVsCAwGSJHO0X6O6ISj8YeFbATjIEBXLDcZfnK3MO4uvCBrJTdVIxdOc79PMqSdg==
 
 path@^0.12.7:
   version "0.12.7"
@@ -16941,6 +18753,11 @@ pend@~1.2.0:
   resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
   integrity sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==
 
+perfect-scrollbar@^1.5.5:
+  version "1.5.5"
+  resolved "https://registry.yarnpkg.com/perfect-scrollbar/-/perfect-scrollbar-1.5.5.tgz#41a211a2fb52a7191eff301432134ea47052b27f"
+  integrity sha512-dzalfutyP3e/FOpdlhVryN4AJ5XDVauVWxybSkLZmakFE2sS3y3pc4JnSprw8tGmHvkaG5Edr5T7LBTZ+WWU2g==
+
 performance-now@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
@@ -16965,11 +18782,6 @@ picocolors@^1.0.0, picocolors@^1.0.1:
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.1.tgz#a8ad579b571952f0e5d25892de5445bcfe25aaa1"
   integrity sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==
 
-picocolors@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.0.tgz#5358b76a78cde483ba5cef6a9dc9671440b27d59"
-  integrity sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==
-
 picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3, picomatch@^2.3.0, picomatch@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
@@ -17000,7 +18812,19 @@ pify@^4.0.1:
   resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
   integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
 
-pirates@^4.0.6:
+pinkie-promise@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
+  integrity sha512-0Gni6D4UcLTbv9c57DfxDGdr41XfgUjqWZu492f0cIGr16zDU06BWP/RAEvOuo7CQ0CNjHaLlM59YJJFm3NWlw==
+  dependencies:
+    pinkie "^2.0.0"
+
+pinkie@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
+  integrity sha512-MnUuEycAemtSaeFSjXKW/aroV7akBbY+Sv+RkyqFjgAe73F+MR0TBWKBRDkmfWq/HiFmdavfZ1G7h4SPZXaCSg==
+
+pirates@^4.0.1, pirates@^4.0.6:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.6.tgz#3018ae32ecfcff6c29ba2267cbf21166ac1f36b9"
   integrity sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==
@@ -17049,45 +18873,38 @@ pkg-up@^3.1.0:
   dependencies:
     find-up "^3.0.0"
 
+pluralize@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-8.0.0.tgz#1a6fa16a38d12a1901e0320fa017051c539ce3b1"
+  integrity sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==
+
 poline@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/poline/-/poline-0.7.0.tgz#fc4435442f29f33081460c951b48fddb0b2ca8f0"
   integrity sha512-ZLlkJKNmzRRARYyWLu8JuWolS23oKQP3FA7vrq9TB+R55bbb0Dfo3zyL69jMWddn88SFl88JWFYhtqe1TXOrEw==
 
-polished@^4.2.2:
+polished@^4.1.3, polished@^4.2.2:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/polished/-/polished-4.3.1.tgz#5a00ae32715609f83d89f6f31d0f0261c6170548"
   integrity sha512-OBatVyC/N7SCW/FaDHrSd+vn0o5cS855TOmYi4OkdWUMSJCET/xip//ch8xGUvtr3i44X9LVyWwQlRMTN3pwSA==
   dependencies:
     "@babel/runtime" "^7.17.8"
 
-popmotion@11.0.3:
-  version "11.0.3"
-  resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-11.0.3.tgz#565c5f6590bbcddab7a33a074bb2ba97e24b0cc9"
-  integrity sha512-Y55FLdj3UxkR7Vl3s7Qr4e9m0onSnP8W7d/xQLsoJM40vs6UKHFdygs6SWryasTZYqugMjm3BepCF4CWXDiHgA==
-  dependencies:
-    framesync "6.0.1"
-    hey-listen "^1.0.8"
-    style-value-types "5.0.0"
-    tslib "^2.1.0"
-
 popper.js@^1.16.0:
   version "1.16.1"
   resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
   integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
 
+posix-character-classes@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
+  integrity sha512-xTgYBc3fuo7Yt7JbiuFxSYGToMoz8fLoE6TC9Wx1P/u+LfeThMOAqmuyECnlBaaJb+u1m9hHiXUEtwW4OzfUJg==
+
 possible-typed-array-names@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz#89bb63c6fada2c3e90adc4a647beeeb39cc7bf8f"
   integrity sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==
 
-postcss-attribute-case-insensitive@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-7.0.0.tgz#500034cdea39836a406626ce0f83686f2af52ffa"
-  integrity sha512-ETMUHIw67Kyv9Q81nden/NuJbRh+4/S963giXpfSLd5eaKK8kd1UdAHMVRV/NG/w/N6Cq8B0qZIZbZZWU/67+A==
-  dependencies:
-    postcss-selector-parser "^6.1.0"
-
 postcss-calc-ast-parser@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/postcss-calc-ast-parser/-/postcss-calc-ast-parser-0.1.4.tgz#9aeee3650a91c0b2902789689bc044c9f83bc447"
@@ -17095,14 +18912,6 @@ postcss-calc-ast-parser@^0.1.4:
   dependencies:
     postcss-value-parser "^3.3.1"
 
-postcss-calc@^10.0.2:
-  version "10.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-10.0.2.tgz#15f01635a27b9d38913a98c4ef2877f5b715b439"
-  integrity sha512-DT/Wwm6fCKgpYVI7ZEWuPJ4az8hiEHtCUeYjZXqU7Ou4QqYh1Df2yCQ7Ca6N7xqKPFkxN3fhf+u9KSoOCJNAjg==
-  dependencies:
-    postcss-selector-parser "^6.1.2"
-    postcss-value-parser "^4.2.0"
-
 postcss-calc@^9.0.1:
   version "9.0.1"
   resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-9.0.1.tgz#a744fd592438a93d6de0f1434c572670361eb6c6"
@@ -17111,58 +18920,6 @@ postcss-calc@^9.0.1:
     postcss-selector-parser "^6.0.11"
     postcss-value-parser "^4.2.0"
 
-postcss-clamp@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-clamp/-/postcss-clamp-4.1.0.tgz#7263e95abadd8c2ba1bd911b0b5a5c9c93e02363"
-  integrity sha512-ry4b1Llo/9zz+PKC+030KUnPITTJAHeOwjfAyyB60eT0AorGLdzp52s31OsPRHRf8NchkgFoG2y6fCfn1IV1Ow==
-  dependencies:
-    postcss-value-parser "^4.2.0"
-
-postcss-cli@^11.0.0:
-  version "11.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-cli/-/postcss-cli-11.0.0.tgz#649f4b9af447501feb6cbca7f7505a132f90442b"
-  integrity sha512-xMITAI7M0u1yolVcXJ9XTZiO9aO49mcoKQy6pCDFdMh9kGqhzLVpWxeD/32M/QBmkhcGypZFFOLNLmIW4Pg4RA==
-  dependencies:
-    chokidar "^3.3.0"
-    dependency-graph "^0.11.0"
-    fs-extra "^11.0.0"
-    get-stdin "^9.0.0"
-    globby "^14.0.0"
-    picocolors "^1.0.0"
-    postcss-load-config "^5.0.0"
-    postcss-reporter "^7.0.0"
-    pretty-hrtime "^1.0.3"
-    read-cache "^1.0.0"
-    slash "^5.0.0"
-    yargs "^17.0.0"
-
-postcss-color-functional-notation@^7.0.2:
-  version "7.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-color-functional-notation/-/postcss-color-functional-notation-7.0.2.tgz#c9f025dc99de7235ca728e39eb69544948878a15"
-  integrity sha512-c2WkR0MS73s+P5SgY1KBaSEE61Rj+miW095rkWDnMQxbTCQkp6y/jft8U0QMxEsI4k1Pd4PdV+TP9/1zIDR6XQ==
-  dependencies:
-    "@csstools/css-color-parser" "^3.0.2"
-    "@csstools/css-parser-algorithms" "^3.0.1"
-    "@csstools/css-tokenizer" "^3.0.1"
-    "@csstools/postcss-progressive-custom-properties" "^4.0.0"
-    "@csstools/utilities" "^2.0.0"
-
-postcss-color-hex-alpha@^10.0.0:
-  version "10.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-color-hex-alpha/-/postcss-color-hex-alpha-10.0.0.tgz#5dd3eba1f8facb4ea306cba6e3f7712e876b0c76"
-  integrity sha512-1kervM2cnlgPs2a8Vt/Qbe5cQ++N7rkYo/2rz2BkqJZIHQwaVuJgQH38REHrAi4uM0b1fqxMkWYmese94iMp3w==
-  dependencies:
-    "@csstools/utilities" "^2.0.0"
-    postcss-value-parser "^4.2.0"
-
-postcss-color-rebeccapurple@^10.0.0:
-  version "10.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-color-rebeccapurple/-/postcss-color-rebeccapurple-10.0.0.tgz#5ada28406ac47e0796dff4056b0a9d5a6ecead98"
-  integrity sha512-JFta737jSP+hdAIEhk1Vs0q0YF5P8fFcj+09pweS8ktuGuZ8pPlykHsk6mPxZ8awDl4TrcxUqJo9l1IhVr/OjQ==
-  dependencies:
-    "@csstools/utilities" "^2.0.0"
-    postcss-value-parser "^4.2.0"
-
 postcss-colormin@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-6.1.0.tgz#076e8d3fb291fbff7b10e6b063be9da42ff6488d"
@@ -17173,16 +18930,6 @@ postcss-colormin@^6.1.0:
     colord "^2.9.3"
     postcss-value-parser "^4.2.0"
 
-postcss-colormin@^7.0.2:
-  version "7.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-7.0.2.tgz#6f3c53c13158168669f45adc3926f35cb240ef8e"
-  integrity sha512-YntRXNngcvEvDbEjTdRWGU606eZvB5prmHG4BF0yLmVpamXbpsRJzevyy6MZVyuecgzI2AWAlvFi8DAeCqwpvA==
-  dependencies:
-    browserslist "^4.23.3"
-    caniuse-api "^3.0.0"
-    colord "^2.9.3"
-    postcss-value-parser "^4.2.0"
-
 postcss-convert-values@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/postcss-convert-values/-/postcss-convert-values-6.1.0.tgz#3498387f8efedb817cbc63901d45bd1ceaa40f48"
@@ -17191,103 +18938,26 @@ postcss-convert-values@^6.1.0:
     browserslist "^4.23.0"
     postcss-value-parser "^4.2.0"
 
-postcss-convert-values@^7.0.4:
-  version "7.0.4"
-  resolved "https://registry.yarnpkg.com/postcss-convert-values/-/postcss-convert-values-7.0.4.tgz#fc13ecedded6365f3c794b502dbcf77d298da12c"
-  integrity sha512-e2LSXPqEHVW6aoGbjV9RsSSNDO3A0rZLCBxN24zvxF25WknMPpX8Dm9UxxThyEbaytzggRuZxaGXqaOhxQ514Q==
-  dependencies:
-    browserslist "^4.23.3"
-    postcss-value-parser "^4.2.0"
-
-postcss-css-variables@^0.19.0:
-  version "0.19.0"
-  resolved "https://registry.yarnpkg.com/postcss-css-variables/-/postcss-css-variables-0.19.0.tgz#7485b1acd8c63cb2ed035ad888996e317db204cf"
-  integrity sha512-Hr0WEYKLK9VCrY15anHXOd4RCvJy/xRvCnWdplGBeLInwEj6Z14hgzTb2W/39dYTCnS8hnHUfU4/F1zxX0IZuQ==
-  dependencies:
-    balanced-match "^1.0.0"
-    escape-string-regexp "^1.0.3"
-    extend "^3.0.1"
-
-postcss-custom-media@^11.0.1:
-  version "11.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-custom-media/-/postcss-custom-media-11.0.1.tgz#7f7157a9235d78432b20a722d8f3844a85043eb8"
-  integrity sha512-vfBliYVgEEJUFXCRPQ7jYt1wlD322u+/5GT0tZqMVYFInkpDHfjhU3nk2quTRW4uFc/umOOqLlxvrEOZRvloMw==
-  dependencies:
-    "@csstools/cascade-layer-name-parser" "^2.0.1"
-    "@csstools/css-parser-algorithms" "^3.0.1"
-    "@csstools/css-tokenizer" "^3.0.1"
-    "@csstools/media-query-list-parser" "^3.0.1"
-
-postcss-custom-properties@^14.0.1:
-  version "14.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-custom-properties/-/postcss-custom-properties-14.0.1.tgz#4374f6a39f6b91d26f10e994fb12d14de518e481"
-  integrity sha512-SB4GjuZjIq5GQFNbxFrirQPbkdbJooyNy8bh+fcJ8ZG0oasJTflTTtR4geb56h+FBVDIb9Hx4v/NiG2caOj8nQ==
-  dependencies:
-    "@csstools/cascade-layer-name-parser" "^2.0.1"
-    "@csstools/css-parser-algorithms" "^3.0.1"
-    "@csstools/css-tokenizer" "^3.0.1"
-    "@csstools/utilities" "^2.0.0"
-    postcss-value-parser "^4.2.0"
-
-postcss-custom-selectors@^8.0.1:
-  version "8.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-custom-selectors/-/postcss-custom-selectors-8.0.1.tgz#05d2b6b3482ad4765a125f41b956a5a15a25ecab"
-  integrity sha512-2McIpyhAeKhUzVqrP4ZyMBpK5FuD+Y9tpQwhcof49652s7gez8057cSaOg/epYcKlztSYxb0GHfi7W5h3JoGUg==
-  dependencies:
-    "@csstools/cascade-layer-name-parser" "^2.0.1"
-    "@csstools/css-parser-algorithms" "^3.0.1"
-    "@csstools/css-tokenizer" "^3.0.1"
-    postcss-selector-parser "^6.1.0"
-
-postcss-dir-pseudo-class@^9.0.0:
-  version "9.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-9.0.0.tgz#44e2bc44e32d05a8a92723cb7d7e23da493b6859"
-  integrity sha512-T59BG9lURiXmhcJMyKbyjNAK3KCyEQYEhaz9GAETHXfIy9XbGQeyz+H0zIwRJlrP4KKRPJolNYe3QjQPemMjBA==
-  dependencies:
-    postcss-selector-parser "^6.1.0"
-
 postcss-discard-comments@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-6.0.2.tgz#e768dcfdc33e0216380623652b0a4f69f4678b6c"
   integrity sha512-65w/uIqhSBBfQmYnG92FO1mWZjJ4GL5b8atm5Yw2UgrwD7HiNiSSNwJor1eCFGzUgYnN/iIknhNRVqjrrpuglw==
 
-postcss-discard-comments@^7.0.3:
-  version "7.0.3"
-  resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-7.0.3.tgz#9c414e8ee99d3514ad06a3465ccc20ec1dbce780"
-  integrity sha512-q6fjd4WU4afNhWOA2WltHgCbkRhZPgQe7cXF74fuVB/ge4QbM9HEaOIzGSiMvM+g/cOsNAUGdf2JDzqA2F8iLA==
-  dependencies:
-    postcss-selector-parser "^6.1.2"
-
 postcss-discard-duplicates@^6.0.3:
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/postcss-discard-duplicates/-/postcss-discard-duplicates-6.0.3.tgz#d121e893c38dc58a67277f75bb58ba43fce4c3eb"
   integrity sha512-+JA0DCvc5XvFAxwx6f/e68gQu/7Z9ud584VLmcgto28eB8FqSFZwtrLwB5Kcp70eIoWP/HXqz4wpo8rD8gpsTw==
 
-postcss-discard-duplicates@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-discard-duplicates/-/postcss-discard-duplicates-7.0.1.tgz#f87f2fe47d8f01afb1e98361c1db3ce1e8afd1a3"
-  integrity sha512-oZA+v8Jkpu1ct/xbbrntHRsfLGuzoP+cpt0nJe5ED2FQF8n8bJtn7Bo28jSmBYwqgqnqkuSXJfSUEE7if4nClQ==
-
 postcss-discard-empty@^6.0.3:
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/postcss-discard-empty/-/postcss-discard-empty-6.0.3.tgz#ee39c327219bb70473a066f772621f81435a79d9"
   integrity sha512-znyno9cHKQsK6PtxL5D19Fj9uwSzC2mB74cpT66fhgOadEUPyXFkbgwm5tvc3bt3NAy8ltE5MrghxovZRVnOjQ==
 
-postcss-discard-empty@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-discard-empty/-/postcss-discard-empty-7.0.0.tgz#218829d1ef0a5d5142dd62f0aa60e00e599d2033"
-  integrity sha512-e+QzoReTZ8IAwhnSdp/++7gBZ/F+nBq9y6PomfwORfP7q9nBpK5AMP64kOt0bA+lShBFbBDcgpJ3X4etHg4lzA==
-
 postcss-discard-overridden@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/postcss-discard-overridden/-/postcss-discard-overridden-6.0.2.tgz#4e9f9c62ecd2df46e8fdb44dc17e189776572e2d"
   integrity sha512-j87xzI4LUggC5zND7KdjsI25APtyMuynXZSujByMaav2roV6OZX+8AaCUcZSWqckZpjAjRyFDdpqybgjFO0HJQ==
 
-postcss-discard-overridden@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-discard-overridden/-/postcss-discard-overridden-7.0.0.tgz#b123ea51e3d4e1d0a254cf71eaff1201926d319c"
-  integrity sha512-GmNAzx88u3k2+sBTZrJSDauR0ccpE24omTQCVmaTTZFz1du6AasspjaUPMJ2ud4RslZpoFKyf+6MSPETLojc6w==
-
 postcss-discard-unused@^6.0.5:
   version "6.0.5"
   resolved "https://registry.yarnpkg.com/postcss-discard-unused/-/postcss-discard-unused-6.0.5.tgz#c1b0e8c032c6054c3fbd22aaddba5b248136f338"
@@ -17295,74 +18965,13 @@ postcss-discard-unused@^6.0.5:
   dependencies:
     postcss-selector-parser "^6.0.16"
 
-postcss-double-position-gradients@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-double-position-gradients/-/postcss-double-position-gradients-6.0.0.tgz#eddd424ec754bb543d057d4d2180b1848095d4d2"
-  integrity sha512-JkIGah3RVbdSEIrcobqj4Gzq0h53GG4uqDPsho88SgY84WnpkTpI0k50MFK/sX7XqVisZ6OqUfFnoUO6m1WWdg==
-  dependencies:
-    "@csstools/postcss-progressive-custom-properties" "^4.0.0"
-    "@csstools/utilities" "^2.0.0"
-    postcss-value-parser "^4.2.0"
-
-postcss-focus-visible@^10.0.0:
-  version "10.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-focus-visible/-/postcss-focus-visible-10.0.0.tgz#54435d9bba825165377cae4eef2a8028440d344c"
-  integrity sha512-GJjzvTj7JY+zN7wVBQ4osdKX53QLUdr6r2rSEkBUqrEMDKu3fHMHKOY9rirdirbHCx3IETnK25EtpPARR2KWNw==
-  dependencies:
-    postcss-selector-parser "^6.1.0"
-
-postcss-focus-within@^9.0.0:
-  version "9.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-focus-within/-/postcss-focus-within-9.0.0.tgz#cb281d1c700178bf21b9ae2f4f3a515f53b959b2"
-  integrity sha512-QwflAWUToNZvQLGbc4qJhrQO8yZ5617L6hSNzNWDoqRX4FoIh9fbJbEjy0nvFPciaaOoCaeqcxBwYPbFU0HvBw==
-  dependencies:
-    postcss-selector-parser "^6.1.0"
-
-postcss-font-variant@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-font-variant/-/postcss-font-variant-5.0.0.tgz#efd59b4b7ea8bb06127f2d031bfbb7f24d32fa66"
-  integrity sha512-1fmkBaCALD72CK2a9i468mA/+tr9/1cBxRRMXOUaZqO43oWPR5imcyPjXwuv7PXbCid4ndlP5zWhidQVVa3hmA==
-
-postcss-gap-properties@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-gap-properties/-/postcss-gap-properties-6.0.0.tgz#d5ff0bdf923c06686499ed2b12e125fe64054fed"
-  integrity sha512-Om0WPjEwiM9Ru+VhfEDPZJAKWUd0mV1HmNXqp2C29z80aQ2uP9UVhLc7e3aYMIor/S5cVhoPgYQ7RtfeZpYTRw==
-
-postcss-image-set-function@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-image-set-function/-/postcss-image-set-function-7.0.0.tgz#538e94e16716be47f9df0573b56bbaca86e1da53"
-  integrity sha512-QL7W7QNlZuzOwBTeXEmbVckNt1FSmhQtbMRvGGqqU4Nf4xk6KUEQhAoWuMzwbSv5jxiRiSZ5Tv7eiDB9U87znA==
-  dependencies:
-    "@csstools/utilities" "^2.0.0"
-    postcss-value-parser "^4.2.0"
-
-postcss-import@^16.1.0:
-  version "16.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-16.1.0.tgz#258732175518129667fe1e2e2a05b19b5654b96a"
-  integrity sha512-7hsAZ4xGXl4MW+OKEWCnF6T5jqBw80/EE9aXg1r2yyn1RsVEU8EtKXbijEODa+rg7iih4bKf7vlvTGYR4CnPNg==
-  dependencies:
-    postcss-value-parser "^4.0.0"
-    read-cache "^1.0.0"
-    resolve "^1.1.7"
-
-postcss-lab-function@^7.0.2:
-  version "7.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-lab-function/-/postcss-lab-function-7.0.2.tgz#c127ffaac928a8f25d150c34ca10ed535228f827"
-  integrity sha512-h4ARGLIBtC1PmCHsLgTWWj8j1i1CXoaht4A5RlITDX2z9AeFBak0YlY6sdF4oJGljrep+Dg2SSccIj4QnFbRDg==
-  dependencies:
-    "@csstools/css-color-parser" "^3.0.2"
-    "@csstools/css-parser-algorithms" "^3.0.1"
-    "@csstools/css-tokenizer" "^3.0.1"
-    "@csstools/postcss-progressive-custom-properties" "^4.0.0"
-    "@csstools/utilities" "^2.0.0"
-
-postcss-load-config@^5.0.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-5.1.0.tgz#4ded23410da973e05edae9d41fa99bb5c1d5477f"
-  integrity sha512-G5AJ+IX0aD0dygOE0yFZQ/huFFMSNneyfp0e3/bT05a8OfPC5FUoZRPfGijUdGOJNMewJiwzcHJXFafFzeKFVA==
+postcss-load-config@^4.0.1:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-4.0.2.tgz#7159dcf626118d33e299f485d6afe4aff7c4a3e3"
+  integrity sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==
   dependencies:
-    lilconfig "^3.1.1"
-    yaml "^2.4.2"
+    lilconfig "^3.0.0"
+    yaml "^2.3.4"
 
 postcss-loader@^7.3.3:
   version "7.3.4"
@@ -17373,13 +18982,6 @@ postcss-loader@^7.3.3:
     jiti "^1.20.0"
     semver "^7.5.4"
 
-postcss-logical@^8.0.0:
-  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-logical/-/postcss-logical-8.0.0.tgz#0db0b90c2dc53b485a8074a4b7a906297544f58d"
-  integrity sha512-HpIdsdieClTjXLOyYdUPAX/XQASNIwdKt5hoZW08ZOAiI+tbV0ta1oclkpVkW5ANU+xJvk3KkA0FejkjGLXUkg==
-  dependencies:
-    postcss-value-parser "^4.2.0"
-
 postcss-merge-idents@^6.0.3:
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/postcss-merge-idents/-/postcss-merge-idents-6.0.3.tgz#7b9c31c7bc823c94bec50f297f04e3c2b838ea65"
@@ -17396,14 +18998,6 @@ postcss-merge-longhand@^6.0.5:
     postcss-value-parser "^4.2.0"
     stylehacks "^6.1.1"
 
-postcss-merge-longhand@^7.0.4:
-  version "7.0.4"
-  resolved "https://registry.yarnpkg.com/postcss-merge-longhand/-/postcss-merge-longhand-7.0.4.tgz#a52d0662b4b29420f3b64a8d5b0ac5133d8db776"
-  integrity sha512-zer1KoZA54Q8RVHKOY5vMke0cCdNxMP3KBfDerjH/BYHh4nCIh+1Yy0t1pAEQF18ac/4z3OFclO+ZVH8azjR4A==
-  dependencies:
-    postcss-value-parser "^4.2.0"
-    stylehacks "^7.0.4"
-
 postcss-merge-rules@^6.1.1:
   version "6.1.1"
   resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-6.1.1.tgz#7aa539dceddab56019469c0edd7d22b64c3dea9d"
@@ -17414,16 +19008,6 @@ postcss-merge-rules@^6.1.1:
     cssnano-utils "^4.0.2"
     postcss-selector-parser "^6.0.16"
 
-postcss-merge-rules@^7.0.4:
-  version "7.0.4"
-  resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-7.0.4.tgz#648cc864d3121e6ec72c2a4f08df1cc801e60ce8"
-  integrity sha512-ZsaamiMVu7uBYsIdGtKJ64PkcQt6Pcpep/uO90EpLS3dxJi6OXamIobTYcImyXGoW0Wpugh7DSD3XzxZS9JCPg==
-  dependencies:
-    browserslist "^4.23.3"
-    caniuse-api "^3.0.0"
-    cssnano-utils "^5.0.0"
-    postcss-selector-parser "^6.1.2"
-
 postcss-minify-font-values@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/postcss-minify-font-values/-/postcss-minify-font-values-6.1.0.tgz#a0e574c02ee3f299be2846369211f3b957ea4c59"
@@ -17431,13 +19015,6 @@ postcss-minify-font-values@^6.1.0:
   dependencies:
     postcss-value-parser "^4.2.0"
 
-postcss-minify-font-values@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-minify-font-values/-/postcss-minify-font-values-7.0.0.tgz#d16a75a2548e000779566b3568fc874ee5d0aa17"
-  integrity sha512-2ckkZtgT0zG8SMc5aoNwtm5234eUx1GGFJKf2b1bSp8UflqaeFzR50lid4PfqVI9NtGqJ2J4Y7fwvnP/u1cQog==
-  dependencies:
-    postcss-value-parser "^4.2.0"
-
 postcss-minify-gradients@^6.0.3:
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/postcss-minify-gradients/-/postcss-minify-gradients-6.0.3.tgz#ca3eb55a7bdb48a1e187a55c6377be918743dbd6"
@@ -17447,15 +19024,6 @@ postcss-minify-gradients@^6.0.3:
     cssnano-utils "^4.0.2"
     postcss-value-parser "^4.2.0"
 
-postcss-minify-gradients@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-minify-gradients/-/postcss-minify-gradients-7.0.0.tgz#f6d84456e6d49164a55d0e45bb1b1809c6cf0959"
-  integrity sha512-pdUIIdj/C93ryCHew0UgBnL2DtUS3hfFa5XtERrs4x+hmpMYGhbzo6l/Ir5de41O0GaKVpK1ZbDNXSY6GkXvtg==
-  dependencies:
-    colord "^2.9.3"
-    cssnano-utils "^5.0.0"
-    postcss-value-parser "^4.2.0"
-
 postcss-minify-params@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/postcss-minify-params/-/postcss-minify-params-6.1.0.tgz#54551dec77b9a45a29c3cb5953bf7325a399ba08"
@@ -17465,15 +19033,6 @@ postcss-minify-params@^6.1.0:
     cssnano-utils "^4.0.2"
     postcss-value-parser "^4.2.0"
 
-postcss-minify-params@^7.0.2:
-  version "7.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-minify-params/-/postcss-minify-params-7.0.2.tgz#264a76e25f202d8b5ca5290569c0e8c3ac599dfe"
-  integrity sha512-nyqVLu4MFl9df32zTsdcLqCFfE/z2+f8GE1KHPxWOAmegSo6lpV2GNy5XQvrzwbLmiU7d+fYay4cwto1oNdAaQ==
-  dependencies:
-    browserslist "^4.23.3"
-    cssnano-utils "^5.0.0"
-    postcss-value-parser "^4.2.0"
-
 postcss-minify-selectors@^6.0.4:
   version "6.0.4"
   resolved "https://registry.yarnpkg.com/postcss-minify-selectors/-/postcss-minify-selectors-6.0.4.tgz#197f7d72e6dd19eed47916d575d69dc38b396aff"
@@ -17481,14 +19040,6 @@ postcss-minify-selectors@^6.0.4:
   dependencies:
     postcss-selector-parser "^6.0.16"
 
-postcss-minify-selectors@^7.0.4:
-  version "7.0.4"
-  resolved "https://registry.yarnpkg.com/postcss-minify-selectors/-/postcss-minify-selectors-7.0.4.tgz#2b69c99ec48a1c223fce4840609d9c53340a11f5"
-  integrity sha512-JG55VADcNb4xFCf75hXkzc1rNeURhlo7ugf6JjiiKRfMsKlDzN9CXHZDyiG6x/zGchpjQS+UAgb1d4nqXqOpmA==
-  dependencies:
-    cssesc "^3.0.0"
-    postcss-selector-parser "^6.1.2"
-
 postcss-modules-extract-imports@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.1.0.tgz#b4497cb85a9c0c4b5aabeb759bb25e8d89f15002"
@@ -17517,46 +19068,11 @@ postcss-modules-values@^4.0.0:
   dependencies:
     icss-utils "^5.0.0"
 
-postcss-modules@^6.0.0:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-modules/-/postcss-modules-6.0.1.tgz#e3e895918c060c14fa6a22f84ba14a4286f436a5"
-  integrity sha512-zyo2sAkVvuZFFy0gc2+4O+xar5dYlaVy/ebO24KT0ftk/iJevSNyPyQellsBLlnccwh7f6V6Y4GvuKRYToNgpQ==
-  dependencies:
-    generic-names "^4.0.0"
-    icss-utils "^5.1.0"
-    lodash.camelcase "^4.3.0"
-    postcss-modules-extract-imports "^3.1.0"
-    postcss-modules-local-by-default "^4.0.5"
-    postcss-modules-scope "^3.2.0"
-    postcss-modules-values "^4.0.0"
-    string-hash "^1.1.3"
-
-postcss-nested@^6.2.0:
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-6.2.0.tgz#4c2d22ab5f20b9cb61e2c5c5915950784d068131"
-  integrity sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==
-  dependencies:
-    postcss-selector-parser "^6.1.1"
-
-postcss-nesting@^13.0.0:
-  version "13.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-nesting/-/postcss-nesting-13.0.0.tgz#4393158faa33f56674167b3556981c9216892ab2"
-  integrity sha512-TCGQOizyqvEkdeTPM+t6NYwJ3EJszYE/8t8ILxw/YoeUvz2rz7aM8XTAmBWh9/DJjfaaabL88fWrsVHSPF2zgA==
-  dependencies:
-    "@csstools/selector-resolve-nested" "^2.0.0"
-    "@csstools/selector-specificity" "^4.0.0"
-    postcss-selector-parser "^6.1.0"
-
 postcss-normalize-charset@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-6.0.2.tgz#1ec25c435057a8001dac942942a95ffe66f721e1"
   integrity sha512-a8N9czmdnrjPHa3DeFlwqst5eaL5W8jYu3EBbTTkI5FHkfMhFZh1EGbku6jhHhIzTA6tquI2P42NtZ59M/H/kQ==
 
-postcss-normalize-charset@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-7.0.0.tgz#92244ae73c31bf8f8885d5f16ff69e857ac6c001"
-  integrity sha512-ABisNUXMeZeDNzCQxPxBCkXexvBrUHV+p7/BXOY+ulxkcjUZO0cp8ekGBwvIh2LbCwnWbyMPNJVtBSdyhM2zYQ==
-
 postcss-normalize-display-values@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/postcss-normalize-display-values/-/postcss-normalize-display-values-6.0.2.tgz#54f02764fed0b288d5363cbb140d6950dbbdd535"
@@ -17564,13 +19080,6 @@ postcss-normalize-display-values@^6.0.2:
   dependencies:
     postcss-value-parser "^4.2.0"
 
-postcss-normalize-display-values@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-display-values/-/postcss-normalize-display-values-7.0.0.tgz#01fb50e5e97ef8935363629bea5a6d3b3aac1342"
-  integrity sha512-lnFZzNPeDf5uGMPYgGOw7v0BfB45+irSRz9gHQStdkkhiM0gTfvWkWB5BMxpn0OqgOQuZG/mRlZyJxp0EImr2Q==
-  dependencies:
-    postcss-value-parser "^4.2.0"
-
 postcss-normalize-positions@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/postcss-normalize-positions/-/postcss-normalize-positions-6.0.2.tgz#e982d284ec878b9b819796266f640852dbbb723a"
@@ -17578,13 +19087,6 @@ postcss-normalize-positions@^6.0.2:
   dependencies:
     postcss-value-parser "^4.2.0"
 
-postcss-normalize-positions@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-positions/-/postcss-normalize-positions-7.0.0.tgz#4eebd7c9d3dde40c97b8047cad38124fc844c463"
-  integrity sha512-I0yt8wX529UKIGs2y/9Ybs2CelSvItfmvg/DBIjTnoUSrPxSV7Z0yZ8ShSVtKNaV/wAY+m7bgtyVQLhB00A1NQ==
-  dependencies:
-    postcss-value-parser "^4.2.0"
-
 postcss-normalize-repeat-style@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-6.0.2.tgz#f8006942fd0617c73f049dd8b6201c3a3040ecf3"
@@ -17592,13 +19094,6 @@ postcss-normalize-repeat-style@^6.0.2:
   dependencies:
     postcss-value-parser "^4.2.0"
 
-postcss-normalize-repeat-style@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-7.0.0.tgz#0cb784655d5714d29bd3bda6dee2fb628aa7227b"
-  integrity sha512-o3uSGYH+2q30ieM3ppu9GTjSXIzOrRdCUn8UOMGNw7Af61bmurHTWI87hRybrP6xDHvOe5WlAj3XzN6vEO8jLw==
-  dependencies:
-    postcss-value-parser "^4.2.0"
-
 postcss-normalize-string@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/postcss-normalize-string/-/postcss-normalize-string-6.0.2.tgz#e3cc6ad5c95581acd1fc8774b309dd7c06e5e363"
@@ -17606,13 +19101,6 @@ postcss-normalize-string@^6.0.2:
   dependencies:
     postcss-value-parser "^4.2.0"
 
-postcss-normalize-string@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-string/-/postcss-normalize-string-7.0.0.tgz#a119d3e63a9614570d8413d572fb9fc8c6a64e8c"
-  integrity sha512-w/qzL212DFVOpMy3UGyxrND+Kb0fvCiBBujiaONIihq7VvtC7bswjWgKQU/w4VcRyDD8gpfqUiBQ4DUOwEJ6Qg==
-  dependencies:
-    postcss-value-parser "^4.2.0"
-
 postcss-normalize-timing-functions@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-6.0.2.tgz#40cb8726cef999de984527cbd9d1db1f3e9062c0"
@@ -17620,13 +19108,6 @@ postcss-normalize-timing-functions@^6.0.2:
   dependencies:
     postcss-value-parser "^4.2.0"
 
-postcss-normalize-timing-functions@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-7.0.0.tgz#99d0ee8c4b23b7f4355fafb91385833b9b07108b"
-  integrity sha512-tNgw3YV0LYoRwg43N3lTe3AEWZ66W7Dh7lVEpJbHoKOuHc1sLrzMLMFjP8SNULHaykzsonUEDbKedv8C+7ej6g==
-  dependencies:
-    postcss-value-parser "^4.2.0"
-
 postcss-normalize-unicode@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/postcss-normalize-unicode/-/postcss-normalize-unicode-6.1.0.tgz#aaf8bbd34c306e230777e80f7f12a4b7d27ce06e"
@@ -17635,14 +19116,6 @@ postcss-normalize-unicode@^6.1.0:
     browserslist "^4.23.0"
     postcss-value-parser "^4.2.0"
 
-postcss-normalize-unicode@^7.0.2:
-  version "7.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-unicode/-/postcss-normalize-unicode-7.0.2.tgz#095f8d36ea29adfdf494069c1de101112992a713"
-  integrity sha512-ztisabK5C/+ZWBdYC+Y9JCkp3M9qBv/XFvDtSw0d/XwfT3UaKeW/YTm/MD/QrPNxuecia46vkfEhewjwcYFjkg==
-  dependencies:
-    browserslist "^4.23.3"
-    postcss-value-parser "^4.2.0"
-
 postcss-normalize-url@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/postcss-normalize-url/-/postcss-normalize-url-6.0.2.tgz#292792386be51a8de9a454cb7b5c58ae22db0f79"
@@ -17650,13 +19123,6 @@ postcss-normalize-url@^6.0.2:
   dependencies:
     postcss-value-parser "^4.2.0"
 
-postcss-normalize-url@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-url/-/postcss-normalize-url-7.0.0.tgz#c88cb7cf8952d3ff631e4eba924e7b060ca802f6"
-  integrity sha512-+d7+PpE+jyPX1hDQZYG+NaFD+Nd2ris6r8fPTBAjE8z/U41n/bib3vze8x7rKs5H1uEw5ppe9IojewouHk0klQ==
-  dependencies:
-    postcss-value-parser "^4.2.0"
-
 postcss-normalize-whitespace@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/postcss-normalize-whitespace/-/postcss-normalize-whitespace-6.0.2.tgz#fbb009e6ebd312f8b2efb225c2fcc7cf32b400cd"
@@ -17664,18 +19130,6 @@ postcss-normalize-whitespace@^6.0.2:
   dependencies:
     postcss-value-parser "^4.2.0"
 
-postcss-normalize-whitespace@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-whitespace/-/postcss-normalize-whitespace-7.0.0.tgz#46b025f0bea72139ddee63015619b0c21cebd845"
-  integrity sha512-37/toN4wwZErqohedXYqWgvcHUGlT8O/m2jVkAfAe9Bd4MzRqlBmXrJRePH0e9Wgnz2X7KymTgTOaaFizQe3AQ==
-  dependencies:
-    postcss-value-parser "^4.2.0"
-
-postcss-opacity-percentage@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-opacity-percentage/-/postcss-opacity-percentage-3.0.0.tgz#0b0db5ed5db5670e067044b8030b89c216e1eb0a"
-  integrity sha512-K6HGVzyxUxd/VgZdX04DCtdwWJ4NGLG212US4/LA1TLAbHgmAsTWVR86o+gGIbFtnTkfOpb9sCRBx8K7HO66qQ==
-
 postcss-ordered-values@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/postcss-ordered-values/-/postcss-ordered-values-6.0.2.tgz#366bb663919707093451ab70c3f99c05672aaae5"
@@ -17684,107 +19138,6 @@ postcss-ordered-values@^6.0.2:
     cssnano-utils "^4.0.2"
     postcss-value-parser "^4.2.0"
 
-postcss-ordered-values@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-ordered-values/-/postcss-ordered-values-7.0.1.tgz#8b4b5b8070ca7756bd49f07d5edf274b8f6782e0"
-  integrity sha512-irWScWRL6nRzYmBOXReIKch75RRhNS86UPUAxXdmW/l0FcAsg0lvAXQCby/1lymxn/o0gVa6Rv/0f03eJOwHxw==
-  dependencies:
-    cssnano-utils "^5.0.0"
-    postcss-value-parser "^4.2.0"
-
-postcss-overflow-shorthand@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-overflow-shorthand/-/postcss-overflow-shorthand-6.0.0.tgz#f5252b4a2ee16c68cd8a9029edb5370c4a9808af"
-  integrity sha512-BdDl/AbVkDjoTofzDQnwDdm/Ym6oS9KgmO7Gr+LHYjNWJ6ExORe4+3pcLQsLA9gIROMkiGVjjwZNoL/mpXHd5Q==
-  dependencies:
-    postcss-value-parser "^4.2.0"
-
-postcss-page-break@^3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/postcss-page-break/-/postcss-page-break-3.0.4.tgz#7fbf741c233621622b68d435babfb70dd8c1ee5f"
-  integrity sha512-1JGu8oCjVXLa9q9rFTo4MbeeA5FMe00/9C7lN4va606Rdb+HkxXtXsmEDrIraQ11fGz/WvKWa8gMuCKkrXpTsQ==
-
-postcss-place@^10.0.0:
-  version "10.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-place/-/postcss-place-10.0.0.tgz#ba36ee4786ca401377ced17a39d9050ed772e5a9"
-  integrity sha512-5EBrMzat2pPAxQNWYavwAfoKfYcTADJ8AXGVPcUZ2UkNloUTWzJQExgrzrDkh3EKzmAx1evfTAzF9I8NGcc+qw==
-  dependencies:
-    postcss-value-parser "^4.2.0"
-
-postcss-preset-env@^10.0.5:
-  version "10.0.5"
-  resolved "https://registry.yarnpkg.com/postcss-preset-env/-/postcss-preset-env-10.0.5.tgz#f7bf8d5fdbc2d40627dccf07e7af5a48c2b61e6a"
-  integrity sha512-ipPOgr3RY0utgJDbNoCX2dxKoQ4e4WO1pC21QhDlxCAX8+qC8O2Ezkzb54fd+8XtZ1UveA5gLjBsVo6dJDoWIg==
-  dependencies:
-    "@csstools/postcss-cascade-layers" "^5.0.0"
-    "@csstools/postcss-color-function" "^4.0.2"
-    "@csstools/postcss-color-mix-function" "^3.0.2"
-    "@csstools/postcss-content-alt-text" "^2.0.1"
-    "@csstools/postcss-exponential-functions" "^2.0.1"
-    "@csstools/postcss-font-format-keywords" "^4.0.0"
-    "@csstools/postcss-gamut-mapping" "^2.0.2"
-    "@csstools/postcss-gradients-interpolation-method" "^5.0.2"
-    "@csstools/postcss-hwb-function" "^4.0.2"
-    "@csstools/postcss-ic-unit" "^4.0.0"
-    "@csstools/postcss-initial" "^2.0.0"
-    "@csstools/postcss-is-pseudo-class" "^5.0.0"
-    "@csstools/postcss-light-dark-function" "^2.0.4"
-    "@csstools/postcss-logical-float-and-clear" "^3.0.0"
-    "@csstools/postcss-logical-overflow" "^2.0.0"
-    "@csstools/postcss-logical-overscroll-behavior" "^2.0.0"
-    "@csstools/postcss-logical-resize" "^3.0.0"
-    "@csstools/postcss-logical-viewport-units" "^3.0.1"
-    "@csstools/postcss-media-minmax" "^2.0.1"
-    "@csstools/postcss-media-queries-aspect-ratio-number-values" "^3.0.1"
-    "@csstools/postcss-nested-calc" "^4.0.0"
-    "@csstools/postcss-normalize-display-values" "^4.0.0"
-    "@csstools/postcss-oklab-function" "^4.0.2"
-    "@csstools/postcss-progressive-custom-properties" "^4.0.0"
-    "@csstools/postcss-relative-color-syntax" "^3.0.2"
-    "@csstools/postcss-scope-pseudo-class" "^4.0.0"
-    "@csstools/postcss-stepped-value-functions" "^4.0.1"
-    "@csstools/postcss-text-decoration-shorthand" "^4.0.1"
-    "@csstools/postcss-trigonometric-functions" "^4.0.1"
-    "@csstools/postcss-unset-value" "^4.0.0"
-    autoprefixer "^10.4.19"
-    browserslist "^4.23.1"
-    css-blank-pseudo "^7.0.0"
-    css-has-pseudo "^7.0.0"
-    css-prefers-color-scheme "^10.0.0"
-    cssdb "^8.1.1"
-    postcss-attribute-case-insensitive "^7.0.0"
-    postcss-clamp "^4.1.0"
-    postcss-color-functional-notation "^7.0.2"
-    postcss-color-hex-alpha "^10.0.0"
-    postcss-color-rebeccapurple "^10.0.0"
-    postcss-custom-media "^11.0.1"
-    postcss-custom-properties "^14.0.1"
-    postcss-custom-selectors "^8.0.1"
-    postcss-dir-pseudo-class "^9.0.0"
-    postcss-double-position-gradients "^6.0.0"
-    postcss-focus-visible "^10.0.0"
-    postcss-focus-within "^9.0.0"
-    postcss-font-variant "^5.0.0"
-    postcss-gap-properties "^6.0.0"
-    postcss-image-set-function "^7.0.0"
-    postcss-lab-function "^7.0.2"
-    postcss-logical "^8.0.0"
-    postcss-nesting "^13.0.0"
-    postcss-opacity-percentage "^3.0.0"
-    postcss-overflow-shorthand "^6.0.0"
-    postcss-page-break "^3.0.4"
-    postcss-place "^10.0.0"
-    postcss-pseudo-class-any-link "^10.0.0"
-    postcss-replace-overflow-wrap "^4.0.0"
-    postcss-selector-not "^8.0.0"
-
-postcss-pseudo-class-any-link@^10.0.0:
-  version "10.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-10.0.0.tgz#ca8a1392c0ae207ccfa44f4de84984bf7cfdf93a"
-  integrity sha512-bde8VE08Gq3ekKDq2BQ0ESOjNX54lrFDK3U9zABPINaqHblbZL/4Wfo5Y2vk6U64yVd/sjDwTzuiisFBpGNNIQ==
-  dependencies:
-    postcss-selector-parser "^6.1.0"
-
 postcss-reduce-idents@^6.0.3:
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/postcss-reduce-idents/-/postcss-reduce-idents-6.0.3.tgz#b0d9c84316d2a547714ebab523ec7d13704cd486"
@@ -17795,52 +19148,17 @@ postcss-reduce-idents@^6.0.3:
 postcss-reduce-initial@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/postcss-reduce-initial/-/postcss-reduce-initial-6.1.0.tgz#4401297d8e35cb6e92c8e9586963e267105586ba"
-  integrity sha512-RarLgBK/CrL1qZags04oKbVbrrVK2wcxhvta3GCxrZO4zveibqbRPmm2VI8sSgCXwoUHEliRSbOfpR0b/VIoiw==
-  dependencies:
-    browserslist "^4.23.0"
-    caniuse-api "^3.0.0"
-
-postcss-reduce-initial@^7.0.2:
-  version "7.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-reduce-initial/-/postcss-reduce-initial-7.0.2.tgz#3dc085347a5943e18547d4b0aa5bd4ff5a93b2c5"
-  integrity sha512-pOnu9zqQww7dEKf62Nuju6JgsW2V0KRNBHxeKohU+JkHd/GAH5uvoObqFLqkeB2n20mr6yrlWDvo5UBU5GnkfA==
-  dependencies:
-    browserslist "^4.23.3"
-    caniuse-api "^3.0.0"
-
-postcss-reduce-transforms@^6.0.2:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-reduce-transforms/-/postcss-reduce-transforms-6.0.2.tgz#6fa2c586bdc091a7373caeee4be75a0f3e12965d"
-  integrity sha512-sB+Ya++3Xj1WaT9+5LOOdirAxP7dJZms3GRcYheSPi1PiTMigsxHAdkrbItHxwYHr4kt1zL7mmcHstgMYT+aiA==
-  dependencies:
-    postcss-value-parser "^4.2.0"
-
-postcss-reduce-transforms@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-reduce-transforms/-/postcss-reduce-transforms-7.0.0.tgz#0386080a14e5faad9f8eda33375b79fe7c4f9677"
-  integrity sha512-pnt1HKKZ07/idH8cpATX/ujMbtOGhUfE+m8gbqwJE05aTaNw8gbo34a2e3if0xc0dlu75sUOiqvwCGY3fzOHew==
-  dependencies:
-    postcss-value-parser "^4.2.0"
-
-postcss-replace-overflow-wrap@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-4.0.0.tgz#d2df6bed10b477bf9c52fab28c568b4b29ca4319"
-  integrity sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw==
-
-postcss-reporter@^7.0.0:
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-reporter/-/postcss-reporter-7.1.0.tgz#5ec476d224e2fe25a054e3c66d9b2901d4fab422"
-  integrity sha512-/eoEylGWyy6/DOiMP5lmFRdmDKThqgn7D6hP2dXKJI/0rJSO1ADFNngZfDzxL0YAxFvws+Rtpuji1YIHj4mySA==
+  integrity sha512-RarLgBK/CrL1qZags04oKbVbrrVK2wcxhvta3GCxrZO4zveibqbRPmm2VI8sSgCXwoUHEliRSbOfpR0b/VIoiw==
   dependencies:
-    picocolors "^1.0.0"
-    thenby "^1.3.4"
+    browserslist "^4.23.0"
+    caniuse-api "^3.0.0"
 
-postcss-selector-not@^8.0.0:
-  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-selector-not/-/postcss-selector-not-8.0.0.tgz#370e76ec27d417d944be966e924656a1ce624e49"
-  integrity sha512-g/juh7A83GWc3+kWL8BiS3YUIJb3XNqIVKz1kGvgN3OhoGCsPncy1qo/+q61tjy5r87OxBhSY1+hcH3yOhEW+g==
+postcss-reduce-transforms@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-transforms/-/postcss-reduce-transforms-6.0.2.tgz#6fa2c586bdc091a7373caeee4be75a0f3e12965d"
+  integrity sha512-sB+Ya++3Xj1WaT9+5LOOdirAxP7dJZms3GRcYheSPi1PiTMigsxHAdkrbItHxwYHr4kt1zL7mmcHstgMYT+aiA==
   dependencies:
-    postcss-selector-parser "^6.1.0"
+    postcss-value-parser "^4.2.0"
 
 postcss-selector-parser@^6.0.11, postcss-selector-parser@^6.0.16, postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4:
   version "6.1.0"
@@ -17850,14 +19168,6 @@ postcss-selector-parser@^6.0.11, postcss-selector-parser@^6.0.16, postcss-select
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
-postcss-selector-parser@^6.1.0, postcss-selector-parser@^6.1.1, postcss-selector-parser@^6.1.2:
-  version "6.1.2"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz#27ecb41fb0e3b6ba7a1ec84fff347f734c7929de"
-  integrity sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==
-  dependencies:
-    cssesc "^3.0.0"
-    util-deprecate "^1.0.2"
-
 postcss-sort-media-queries@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/postcss-sort-media-queries/-/postcss-sort-media-queries-5.2.0.tgz#4556b3f982ef27d3bac526b99b6c0d3359a6cf97"
@@ -17873,14 +19183,6 @@ postcss-svgo@^6.0.3:
     postcss-value-parser "^4.2.0"
     svgo "^3.2.0"
 
-postcss-svgo@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-7.0.1.tgz#2b63571d8e9568384df334bac9917baff4d23f58"
-  integrity sha512-0WBUlSL4lhD9rA5k1e5D8EN5wCEyZD6HJk0jIvRxl+FDVOMlJ7DePHYWGGVc5QRqrJ3/06FTXM0bxjmJpmTPSA==
-  dependencies:
-    postcss-value-parser "^4.2.0"
-    svgo "^3.3.2"
-
 postcss-unique-selectors@^6.0.4:
   version "6.0.4"
   resolved "https://registry.yarnpkg.com/postcss-unique-selectors/-/postcss-unique-selectors-6.0.4.tgz#983ab308896b4bf3f2baaf2336e14e52c11a2088"
@@ -17888,13 +19190,6 @@ postcss-unique-selectors@^6.0.4:
   dependencies:
     postcss-selector-parser "^6.0.16"
 
-postcss-unique-selectors@^7.0.3:
-  version "7.0.3"
-  resolved "https://registry.yarnpkg.com/postcss-unique-selectors/-/postcss-unique-selectors-7.0.3.tgz#483fc11215b23d517d5d9bbe5833d9915619ca33"
-  integrity sha512-J+58u5Ic5T1QjP/LDV9g3Cx4CNOgB5vz+kM6+OxHHhFACdcDeKhBXjQmB7fnIZM12YSTvsL0Opwco83DmacW2g==
-  dependencies:
-    postcss-selector-parser "^6.1.2"
-
 postcss-value-parser-esm@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/postcss-value-parser-esm/-/postcss-value-parser-esm-4.2.0.tgz#20ddda201ec2b630e0a0928e282a092fd2b0d31b"
@@ -17905,7 +19200,7 @@ postcss-value-parser@^3.3.1:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
   integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
 
-postcss-value-parser@^4.0.0, postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
+postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
@@ -17924,7 +19219,7 @@ postcss@8.4.31:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
-postcss@^8.3.7, postcss@^8.4.21, postcss@^8.4.24, postcss@^8.4.26, postcss@^8.4.33, postcss@^8.4.38:
+postcss@8.4.38, postcss@^8.3.7, postcss@^8.4.21, postcss@^8.4.24, postcss@^8.4.26, postcss@^8.4.33, postcss@^8.4.38:
   version "8.4.38"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.38.tgz#b387d533baf2054288e337066d81c6bee9db9e0e"
   integrity sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==
@@ -17942,15 +19237,6 @@ postcss@^8.4.39:
     picocolors "^1.0.1"
     source-map-js "^1.2.0"
 
-postcss@^8.4.47:
-  version "8.4.47"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.47.tgz#5bf6c9a010f3e724c503bf03ef7947dcb0fea365"
-  integrity sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==
-  dependencies:
-    nanoid "^3.3.7"
-    picocolors "^1.1.0"
-    source-map-js "^1.2.1"
-
 preact-render-to-string@5.2.3:
   version "5.2.3"
   resolved "https://registry.yarnpkg.com/preact-render-to-string/-/preact-render-to-string-5.2.3.tgz#23d17376182af720b1060d5a4099843c7fe92fe4"
@@ -17996,7 +19282,12 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
-"prettier-fallback@npm:prettier@^3":
+prepend-http@^1.0.1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
+  integrity sha512-PhmXi5XmoyKw1Un4E+opM2KcsJInDvKyuOumcjjw3waw86ZNjHwVUOOWLc4bCzLdcKNaWBH9e99sbWzDQsVaYg==
+
+"prettier-fallback@npm:prettier@^3", prettier@^3.1.1, prettier@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.3.2.tgz#03ff86dc7c835f2d2559ee76876a3914cec4a90a"
   integrity sha512-rAVeHYMcv8ATV5d508CFdn+8/pHPpXeIid1DdrPwXnaAdH7cqjVbpJaT5eq4yRAFU/lsbwYwSF/n5iNrdJHPQA==
@@ -18008,22 +19299,22 @@ prettier-linter-helpers@^1.0.0:
   dependencies:
     fast-diff "^1.1.2"
 
+prettier@2.8.7:
+  version "2.8.7"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.7.tgz#bb79fc8729308549d28fe3a98fce73d2c0656450"
+  integrity sha512-yPngTo3aXUUmyuTjeTUT75txrf+aMh9FiD7q9ZE/i6r0bPb22g4FsE6Y338PQX1bmfy08i9QQCB7/rcUAVntfw==
+
 prettier@^2.7.1:
   version "2.8.8"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da"
   integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==
 
-prettier@^3.1.1, prettier@^3.3.2:
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.3.2.tgz#03ff86dc7c835f2d2559ee76876a3914cec4a90a"
-  integrity sha512-rAVeHYMcv8ATV5d508CFdn+8/pHPpXeIid1DdrPwXnaAdH7cqjVbpJaT5eq4yRAFU/lsbwYwSF/n5iNrdJHPQA==
-
-prettier@^3.3.3:
-  version "3.4.2"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.4.2.tgz#a5ce1fb522a588bf2b78ca44c6e6fe5aa5a2b13f"
-  integrity sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==
+pretty-bytes@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-4.0.2.tgz#b2bf82e7350d65c6c33aa95aaa5a4f6327f61cd9"
+  integrity sha512-yJAF+AjbHKlxQ8eezMd/34Mnj/YTQ3i6kLzvVsH4l/BfIFtp444n0wVbnsn66JimZ9uBofv815aRp1zCppxlWw==
 
-pretty-bytes@^5.3.0, pretty-bytes@^5.6.0:
+pretty-bytes@^5.1.0, pretty-bytes@^5.2.0, pretty-bytes@^5.3.0, pretty-bytes@^5.6.0:
   version "5.6.0"
   resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"
   integrity sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==
@@ -18036,6 +19327,16 @@ pretty-error@^4.0.0:
     lodash "^4.17.20"
     renderkid "^3.0.0"
 
+pretty-format@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-26.6.2.tgz#e35c2705f14cb7fe2fe94fa078345b444120fc93"
+  integrity sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==
+  dependencies:
+    "@jest/types" "^26.6.2"
+    ansi-regex "^5.0.0"
+    ansi-styles "^4.0.0"
+    react-is "^17.0.1"
+
 pretty-format@^27.0.2:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.5.1.tgz#2181879fdea51a7a5851fb39d920faa63f01d88e"
@@ -18094,7 +19395,7 @@ prismjs@~1.27.0:
   resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.27.0.tgz#bb6ee3138a0b438a3653dd4d6ce0cc6510a45057"
   integrity sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==
 
-process-nextick-args@~2.0.0:
+process-nextick-args@^2.0.0, process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
   integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
@@ -18104,7 +19405,7 @@ process@^0.11.1, process@^0.11.10:
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
   integrity sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==
 
-prompts@^2.4.0, prompts@^2.4.2:
+prompts@^2.0.1, prompts@^2.4.0, prompts@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.4.2.tgz#7b57e73b3a48029ad10ebd44f74b01722a4cb069"
   integrity sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==
@@ -18112,7 +19413,7 @@ prompts@^2.4.0, prompts@^2.4.2:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@^15.5.0, prop-types@^15.5.7, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -18229,7 +19530,7 @@ qs@6.11.0:
   dependencies:
     side-channel "^1.0.4"
 
-qs@^6.10.0:
+qs@^6.10.0, qs@^6.11.2:
   version "6.12.1"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.12.1.tgz#39422111ca7cbdb70425541cba20c7d7b216599a"
   integrity sha512-zWmv4RSuB9r2mYQw3zxQuHWeU+42aKi1wWig/j4ele4ygELZ7PEO6MM7rim9oAQH2A5MWfsAVf/jPvTPgCbvUQ==
@@ -18243,13 +19544,6 @@ qs@^6.10.2:
   dependencies:
     side-channel "^1.0.6"
 
-qs@^6.12.3:
-  version "6.13.1"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.13.1.tgz#3ce5fc72bd3a8171b85c99b93c65dd20b7d1b16e"
-  integrity sha512-EJPeIn0CYrGu+hli1xilKAPXODtJ12T0sP63Ijx2/khC2JtuaN3JyNIpvmnkmaEtha9ocbG4A4cMcr+TvqvwQg==
-  dependencies:
-    side-channel "^1.0.6"
-
 querystringify@^2.1.1:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
@@ -18548,39 +19842,6 @@ react-dev-utils@^12.0.1:
     strip-ansi "^6.0.1"
     text-table "^0.2.0"
 
-react-devtools-inline@4.4.0:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/react-devtools-inline/-/react-devtools-inline-4.4.0.tgz#e032a6eb17a9977b682306f84b46e683adf4bf68"
-  integrity sha512-ES0GolSrKO8wsKbsEkVeiR/ZAaHQTY4zDh1UW8DImVmm8oaGLl3ijJDvSGe+qDRKPZdPRnDtWWnSvvrgxXdThQ==
-  dependencies:
-    es6-symbol "^3"
-
-react-dnd-html5-backend@^16.0.1:
-  version "16.0.1"
-  resolved "https://registry.yarnpkg.com/react-dnd-html5-backend/-/react-dnd-html5-backend-16.0.1.tgz#87faef15845d512a23b3c08d29ecfd34871688b6"
-  integrity sha512-Wu3dw5aDJmOGw8WjH1I1/yTH+vlXEL4vmjk5p+MHxP8HuHJS1lAGeIdG/hze1AvNeXWo/JgULV87LyQOr+r5jw==
-  dependencies:
-    dnd-core "^16.0.1"
-
-react-dnd-touch-backend@^16.0.1:
-  version "16.0.1"
-  resolved "https://registry.yarnpkg.com/react-dnd-touch-backend/-/react-dnd-touch-backend-16.0.1.tgz#e73f8169e2b9fac0f687970f875cac0a4d02d6e2"
-  integrity sha512-NonoCABzzjyWGZuDxSG77dbgMZ2Wad7eQiCd/ECtsR2/NBLTjGksPUx9UPezZ1nQ/L7iD130Tz3RUshL/ClKLA==
-  dependencies:
-    "@react-dnd/invariant" "^4.0.1"
-    dnd-core "^16.0.1"
-
-react-dnd@^16.0.1:
-  version "16.0.1"
-  resolved "https://registry.yarnpkg.com/react-dnd/-/react-dnd-16.0.1.tgz#2442a3ec67892c60d40a1559eef45498ba26fa37"
-  integrity sha512-QeoM/i73HHu2XF9aKksIUuamHPDvRglEwdHL4jsp784BgUuWcg6mzfxT0QDdQz8Wj0qyRKx2eMg8iZtWvU4E2Q==
-  dependencies:
-    "@react-dnd/invariant" "^4.0.1"
-    "@react-dnd/shallowequal" "^4.0.1"
-    dnd-core "^16.0.1"
-    fast-deep-equal "^3.1.3"
-    hoist-non-react-statics "^3.3.2"
-
 react-docgen-typescript@^2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/react-docgen-typescript/-/react-docgen-typescript-2.2.2.tgz#4611055e569edc071204aadb20e1c93e1ab1659c"
@@ -18619,6 +19880,13 @@ react-element-to-jsx-string@^15.0.0:
     is-plain-object "5.0.0"
     react-is "18.1.0"
 
+react-error-boundary@4.0.11:
+  version "4.0.11"
+  resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-4.0.11.tgz#36bf44de7746714725a814630282fee83a7c9a1c"
+  integrity sha512-U13ul67aP5DOSPNSCWQ/eO0AQEYzEFkVljULQIjMV0KlffTAhxuDoBKdO0pb/JZ8mDhMKFZ9NZi0BmLGUiNphw==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+
 react-error-boundary@^4.0.13:
   version "4.0.13"
   resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-4.0.13.tgz#80386b7b27b1131c5fbb7368b8c0d983354c7947"
@@ -18706,7 +19974,7 @@ react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react-is@^17.0.1, react-is@^17.0.2:
+react-is@^17.0.1:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
@@ -18782,16 +20050,6 @@ react-markdown@^9.0.1, react-markdown@~9.0.1:
     unist-util-visit "^5.0.0"
     vfile "^6.0.0"
 
-react-measure@^2.0.2:
-  version "2.5.2"
-  resolved "https://registry.yarnpkg.com/react-measure/-/react-measure-2.5.2.tgz#4ffc410e8b9cb836d9455a9ff18fc1f0fca67f89"
-  integrity sha512-M+rpbTLWJ3FD6FXvYV6YEGvQ5tMayQ3fGrZhRPHrE9bVlBYfDCLuDcgNttYfk8IqfOI03jz6cbpqMRTUclQnaA==
-  dependencies:
-    "@babel/runtime" "^7.2.0"
-    get-node-dimensions "^1.2.1"
-    prop-types "^15.6.2"
-    resize-observer-polyfill "^1.5.0"
-
 react-no-ssr@1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/react-no-ssr/-/react-no-ssr-1.1.0.tgz#313b48d2e26020f969ed98e472f10481604e3cc8"
@@ -18819,16 +20077,6 @@ react-redux@^9.1.2:
     "@types/use-sync-external-store" "^0.0.3"
     use-sync-external-store "^1.0.0"
 
-react-reflex@4.2.6:
-  version "4.2.6"
-  resolved "https://registry.yarnpkg.com/react-reflex/-/react-reflex-4.2.6.tgz#96923704102fe0baebe140968d770f4018715d79"
-  integrity sha512-MLGty/ii/BTipKZ47dfs8Ue5g1xqgCxUCDM34ruEr0UVJuXGDzcSX9wPMzRcv4dUR+1tw4hm4c3a6V6hLO2XcA==
-  dependencies:
-    "@babel/runtime" "^7.0.0"
-    lodash.throttle "^4.1.1"
-    prop-types "^15.5.8"
-    react-measure "^2.0.2"
-
 react-remove-scroll-bar@^2.3.3, react-remove-scroll-bar@^2.3.4:
   version "2.3.6"
   resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.6.tgz#3e585e9d163be84a010180b18721e851ac81a29c"
@@ -18934,18 +20182,19 @@ react-syntax-highlighter@^15.5.0:
     prismjs "^1.27.0"
     refractor "^3.6.0"
 
+react-tabs@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/react-tabs/-/react-tabs-4.3.0.tgz#9f4db0fd209ba4ab2c1e78993ff964435f84af62"
+  integrity sha512-2GfoG+f41kiBIIyd3gF+/GRCCYtamC8/2zlAcD8cqQmqI9Q+YVz7fJLHMmU9pXDVYYHpJeCgUSBJju85vu5q8Q==
+  dependencies:
+    clsx "^1.1.0"
+    prop-types "^15.5.0"
+
 react-universal-interface@^0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/react-universal-interface/-/react-universal-interface-0.6.2.tgz#5e8d438a01729a4dbbcbeeceb0b86be146fe2b3b"
   integrity sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw==
 
-react-use-measure@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/react-use-measure/-/react-use-measure-2.1.1.tgz#5824537f4ee01c9469c45d5f7a8446177c6cc4ba"
-  integrity sha512-nocZhN26cproIiIduswYpV5y5lQpSQS1y/4KuvUCjSKmw7ZWIS/+g3aFnX3WdBkyuGUtTLif3UTqnLLhbDoQig==
-  dependencies:
-    debounce "^1.2.1"
-
 react-use@17.4.0:
   version "17.4.0"
   resolved "https://registry.yarnpkg.com/react-use/-/react-use-17.4.0.tgz#cefef258b0a6c534a5c8021c2528ac6e1a4cdc6d"
@@ -18997,12 +20246,45 @@ reactflow@^11.11.4:
     "@reactflow/node-resizer" "2.2.14"
     "@reactflow/node-toolbar" "1.3.14"
 
-read-cache@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
-  integrity sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==
+read-chunk@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/read-chunk/-/read-chunk-2.1.0.tgz#6a04c0928005ed9d42e1a6ac5600e19cbc7ff655"
+  integrity sha512-QQqB2O9KX/BnztP1xkTRsBxABcWHCXTqQYmEm/DdNId1nw+leKkZvV/g5oCKUrXolGtU3zouoIxMLToAYyDgDw==
   dependencies:
-    pify "^2.3.0"
+    pify "^3.0.0"
+    safe-buffer "^5.1.1"
+
+read-chunk@^3.0.0, read-chunk@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/read-chunk/-/read-chunk-3.2.0.tgz#2984afe78ca9bfbbdb74b19387bf9e86289c16ca"
+  integrity sha512-CEjy9LCzhmD7nUpJ1oVOE6s/hBkejlcJEgLQHVnQznOSilOPb+kpKktlLfFDK3/WP43+F80xkUTM2VOkYoSYvQ==
+  dependencies:
+    pify "^4.0.1"
+    with-open-file "^0.1.6"
+
+read-pkg-up@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-3.0.0.tgz#3ed496685dba0f8fe118d0691dc51f4a1ff96f07"
+  integrity sha512-YFzFrVvpC6frF1sz8psoHDBGF7fLPc+llq/8NB43oagqWkx8ar5zYtsTORtOjw9W2RHLpWP+zTWwBvf1bCmcSw==
+  dependencies:
+    find-up "^2.0.0"
+    read-pkg "^3.0.0"
+
+read-pkg-up@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-4.0.0.tgz#1b221c6088ba7799601c808f91161c66e58f8978"
+  integrity sha512-6etQSH7nJGsK0RbG/2TeDzZFa8shjQ1um+SwQQ5cwKy0dhSXdOncEhb1CPpvQG4h7FyOV6EB6YlV0yJvZQNAkA==
+  dependencies:
+    find-up "^3.0.0"
+    read-pkg "^3.0.0"
+
+read-pkg-up@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-5.0.0.tgz#b6a6741cb144ed3610554f40162aa07a6db621b8"
+  integrity sha512-XBQjqOBtTzyol2CpsQOw8LHV0XbDZVG7xMMjmXAJomlVY03WOBRmYgDJETlvcg0H63AJvPRwT7GFi5rvOzUOKg==
+  dependencies:
+    find-up "^3.0.0"
+    read-pkg "^5.0.0"
 
 read-pkg-up@^7.0.1:
   version "7.0.1"
@@ -19022,7 +20304,7 @@ read-pkg@^3.0.0:
     normalize-package-data "^2.3.2"
     path-type "^3.0.0"
 
-read-pkg@^5.2.0:
+read-pkg@^5.0.0, read-pkg@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-5.2.0.tgz#7bf295438ca5a33e56cd30e053b34ee7250c93cc"
   integrity sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==
@@ -19042,7 +20324,16 @@ read-yaml-file@^1.1.0:
     pify "^4.0.1"
     strip-bom "^3.0.0"
 
-readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.6, readable-stream@~2.3.6:
+"readable-stream@2 || 3", readable-stream@^3.0.6, readable-stream@^3.1.1, readable-stream@^3.4.0, readable-stream@^3.6.0:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.2.tgz#56a9b36ea965c00c5a93ef31eb111a0f11056967"
+  integrity sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==
+  dependencies:
+    inherits "^2.0.3"
+    string_decoder "^1.1.1"
+    util-deprecate "^1.0.1"
+
+readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.6, readable-stream@^2.3.5, readable-stream@~2.3.6:
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.8.tgz#91125e8042bba1b9887f49345f6277027ce8be9b"
   integrity sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==
@@ -19055,15 +20346,6 @@ readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.6, readable
     string_decoder "~1.1.1"
     util-deprecate "~1.0.1"
 
-readable-stream@^3.0.6, readable-stream@^3.1.1, readable-stream@^3.4.0, readable-stream@^3.6.0:
-  version "3.6.2"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.2.tgz#56a9b36ea965c00c5a93ef31eb111a0f11056967"
-  integrity sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==
-  dependencies:
-    inherits "^2.0.3"
-    string_decoder "^1.1.1"
-    util-deprecate "^1.0.1"
-
 readdirp@~3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
@@ -19109,12 +20391,47 @@ redent@^3.0.0:
     indent-string "^4.0.0"
     strip-indent "^3.0.0"
 
+redoc@2.1.3:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/redoc/-/redoc-2.1.3.tgz#612c9fed744993d5fc99cbf39fe9056bd1034fa5"
+  integrity sha512-d7F9qLLxaiFW4GC03VkwlX9wuRIpx9aiIIf3o6mzMnqPfhxrn2IRKGndrkJeVdItgCfmg9jXZiFEowm60f1meQ==
+  dependencies:
+    "@redocly/openapi-core" "^1.0.0-rc.2"
+    classnames "^2.3.1"
+    decko "^1.2.0"
+    dompurify "^2.2.8"
+    eventemitter3 "^4.0.7"
+    json-pointer "^0.6.2"
+    lunr "^2.3.9"
+    mark.js "^8.11.1"
+    marked "^4.0.15"
+    mobx-react "^7.2.0"
+    openapi-sampler "^1.3.1"
+    path-browserify "^1.0.1"
+    perfect-scrollbar "^1.5.5"
+    polished "^4.1.3"
+    prismjs "^1.27.0"
+    prop-types "^15.7.2"
+    react-tabs "^4.3.0"
+    slugify "~1.4.7"
+    stickyfill "^1.1.1"
+    swagger2openapi "^7.0.6"
+    url-template "^2.0.8"
+
+redocusaurus@^2.0.2:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/redocusaurus/-/redocusaurus-2.1.0.tgz#11d465a16668938ab8951003def8a00379e87946"
+  integrity sha512-PJ7Tlx9CVHjXdWDvUZzyZ2ymwF4uais5MTXZI0iTI13T7ADa6Zdcd5MhcnhBdDBWL8/jrSHl9+X1af1BsnP9Qg==
+  dependencies:
+    docusaurus-plugin-redoc "2.1.0"
+    docusaurus-theme-redoc "2.0.2"
+
 redux-immutable@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/redux-immutable/-/redux-immutable-4.0.0.tgz#3a1a32df66366462b63691f0e1dc35e472bbc9f3"
   integrity sha512-SchSn/DWfGb3oAejd+1hhHx01xUoxY+V7TeK0BKqpkLKiQPVFf7DYzEaKmrEVxsWxielKfSK9/Xq66YyxgR1cg==
 
-redux@4.2.1, redux@^4.2.0, redux@^4.2.1:
+redux@4.2.1, redux@^4.2.1:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.1.tgz#c08f4306826c49b5e9dc901dee0452ea8fce6197"
   integrity sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==
@@ -19158,6 +20475,11 @@ refractor@^4.8.0:
     hastscript "^7.0.0"
     parse-entities "^4.0.0"
 
+reftools@^1.1.9:
+  version "1.1.9"
+  resolved "https://registry.yarnpkg.com/reftools/-/reftools-1.1.9.tgz#e16e19f662ccd4648605312c06d34e5da3a2b77e"
+  integrity sha512-OVede/NQE13xBQ+ob5CKd5KyeJYU2YInb1bmV4nRoOfquZPkAkxuOXicSe1PvqIuZZ4kD13sPKBbR7UFDmli6w==
+
 regenerate-unicode-properties@^10.1.0:
   version "10.1.1"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.1.tgz#6b0e05489d9076b04c436f318d9b067bba459480"
@@ -19187,6 +20509,14 @@ regenerator-transform@^0.15.2:
   dependencies:
     "@babel/runtime" "^7.8.4"
 
+regex-not@^1.0.0, regex-not@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/regex-not/-/regex-not-1.0.2.tgz#1f4ece27e00b0b65e0247a6810e6a85d83a5752c"
+  integrity sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==
+  dependencies:
+    extend-shallow "^3.0.2"
+    safe-regex "^1.1.0"
+
 regexp.prototype.flags@^1.5.1, regexp.prototype.flags@^1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz#138f644a3350f981a858c44f6bb1a61ff59be334"
@@ -19449,6 +20779,11 @@ remarkable@^2.0.1:
     argparse "^1.0.10"
     autolinker "^3.11.0"
 
+remove-trailing-separator@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
+  integrity sha512-/hS+Y0u3aOfIETiaiirUFwDBDzmXPvO+jAfKTitUngIPzdKc6Z0LoFjM/CK5PL4C+eKwHohlHAb6H0VFfmmUsw==
+
 renderkid@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/renderkid/-/renderkid-3.0.0.tgz#5fd823e4d6951d37358ecc9a58b1f06836b6268a"
@@ -19460,11 +20795,21 @@ renderkid@^3.0.0:
     lodash "^4.17.21"
     strip-ansi "^6.0.1"
 
-repeat-string@^1.5.2:
+repeat-element@^1.1.2:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.4.tgz#be681520847ab58c7568ac75fbfad28ed42d39e9"
+  integrity sha512-LFiNfRcSu7KK3evMyYOuCzv3L10TW7yC1G2/+StMjK8Y6Vqd2MG7r/Qjw4ghtuCOjFvlnms/iMmLqpvW/ES/WQ==
+
+repeat-string@^1.5.2, repeat-string@^1.6.1:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
   integrity sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w==
 
+replace-ext@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-1.0.1.tgz#2d6d996d04a15855d967443631dd5f77825b016a"
+  integrity sha512-yD5BHCe7quCgBph4rMQ+0KkIRKwWCrHDOX1p1Gp6HwjPM5kVoCdKGNhN7ydqqsX6lJEnQDKZ/tFMiEdQ1dvPEw==
+
 request-progress@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/request-progress/-/request-progress-3.0.0.tgz#4ca754081c7fec63f505e4faa825aa06cd669dbe"
@@ -19507,7 +20852,7 @@ reselect@^5.1.0:
   resolved "https://registry.yarnpkg.com/reselect/-/reselect-5.1.1.tgz#c766b1eb5d558291e5e550298adb0becc24bb72e"
   integrity sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==
 
-resize-observer-polyfill@^1.5.0, resize-observer-polyfill@^1.5.1:
+resize-observer-polyfill@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
   integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
@@ -19517,6 +20862,13 @@ resolve-alpn@^1.2.0:
   resolved "https://registry.yarnpkg.com/resolve-alpn/-/resolve-alpn-1.2.1.tgz#b7adbdac3546aaaec20b45e7d8265927072726f9"
   integrity sha512-0a1F4l73/ZFZOakJnQ3FvkJ2+gSTQWz/r2KE5OdDY0TxPm5h4GkqkWWfM47T7HsbnOtcJVEF4epCVy6u7Q3K+g==
 
+resolve-cwd@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"
+  integrity sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==
+  dependencies:
+    resolve-from "^5.0.0"
+
 resolve-from@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
@@ -19537,7 +20889,12 @@ resolve-pkg-maps@^1.0.0:
   resolved "https://registry.yarnpkg.com/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz#616b3dc2c57056b5588c31cdf4b3d64db133720f"
   integrity sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==
 
-resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.14.2, resolve@^1.22.1, resolve@^1.22.2, resolve@^1.22.4, resolve@^1.22.8:
+resolve-url@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
+  integrity sha512-ZuF55hVUQaaczgOIwqWzkEcEidmlD/xl44x1UZnhOXcYuFN2S6+rcxpG+C1N3So0wvNI3DmJICUFfu2SxhBmvg==
+
+resolve@^1.1.6, resolve@^1.10.0, resolve@^1.14.2, resolve@^1.18.1, resolve@^1.22.1, resolve@^1.22.4, resolve@^1.22.8:
   version "1.22.8"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d"
   integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
@@ -19567,13 +20924,28 @@ responselike@^3.0.0:
   dependencies:
     lowercase-keys "^3.0.0"
 
-resq@1.10.2, resq@^1.11.0:
+resq@1.10.2:
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/resq/-/resq-1.10.2.tgz#cedf4f20d53f6e574b1e12afbda446ad9576c193"
+  integrity sha512-HmgVS3j+FLrEDBTDYysPdPVF9/hioDMJ/otOiQDKqk77YfZeeLOj0qi34yObumcud1gBpk+wpBTEg4kMicD++A==
+  dependencies:
+    fast-deep-equal "^2.0.1"
+
+resq@^1.11.0:
   version "1.11.0"
   resolved "https://registry.yarnpkg.com/resq/-/resq-1.11.0.tgz#edec8c58be9af800fd628118c0ca8815283de196"
   integrity sha512-G10EBz+zAAy3zUd/CDoBbXRL6ia9kOo3xRHrMDsHljI0GDkhYlyjwoCx5+3eCC4swi1uCoZQhskuJkj7Gp57Bw==
   dependencies:
     fast-deep-equal "^2.0.1"
 
+restore-cursor@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-2.0.0.tgz#9f7ee287f82fd326d4fd162923d62129eee0dfaf"
+  integrity sha512-6IzJLuGi4+R14vwagDHX+JrXmPVtPpn4mffDJ1UdR7/Edm87fl6yi8mMBIVvFtJaNTUvjughmW4hwLhRG7gC1Q==
+  dependencies:
+    onetime "^2.0.0"
+    signal-exit "^3.0.2"
+
 restore-cursor@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-3.1.0.tgz#39f67c54b3a7a58cea5236d95cf0034239631f7e"
@@ -19595,6 +20967,11 @@ ret@^0.2.0:
   resolved "https://registry.yarnpkg.com/ret/-/ret-0.2.2.tgz#b6861782a1f4762dce43402a71eb7a283f44573c"
   integrity sha512-M0b3YWQs7R3Z917WRQy1HHA7Ba7D8hvZg6UE5mLykJxQVE2ju0IXbGlaHPPlkY+WN7wFP+wUMXmBFA0aV6vYGQ==
 
+ret@~0.1.10:
+  version "0.1.15"
+  resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.15.tgz#b8a4825d5bdb1fc3f6f53c2bc33f81388681c7bc"
+  integrity sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==
+
 retry@^0.13.1:
   version "0.13.1"
   resolved "https://registry.yarnpkg.com/retry/-/retry-0.13.1.tgz#185b1587acf67919d63b357349e03537b2484658"
@@ -19610,14 +20987,14 @@ rfdc@^1.3.0:
   resolved "https://registry.yarnpkg.com/rfdc/-/rfdc-1.4.1.tgz#778f76c4fb731d93414e8f925fbecf64cce7f6ca"
   integrity sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==
 
-rimraf@^2.6.1, rimraf@^2.6.3:
+rimraf@^2.2.8, rimraf@^2.4.4, rimraf@^2.6.1, rimraf@^2.6.2, rimraf@^2.6.3:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
   integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==
   dependencies:
     glob "^7.1.3"
 
-rimraf@^3.0.2:
+rimraf@^3.0.0, rimraf@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
   integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
@@ -19636,7 +21013,7 @@ robust-predicates@^3.0.2:
   resolved "https://registry.yarnpkg.com/robust-predicates/-/robust-predicates-3.0.2.tgz#d5b28528c4824d20fc48df1928d41d9efa1ad771"
   integrity sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg==
 
-rollup@^4.13.0:
+rollup@^4.0.2, rollup@^4.13.0:
   version "4.18.0"
   resolved "https://registry.yarnpkg.com/rollup/-/rollup-4.18.0.tgz#497f60f0c5308e4602cf41136339fbf87d5f5dda"
   integrity sha512-QmJz14PX3rzbJCN1SG4Xe/bAAX2a6NpCP8ab2vfu2GiUr8AQcr2nCV/oEO3yneFarB67zk8ShlIyWb2LGTb3Sg==
@@ -19687,6 +21064,11 @@ rrweb@2.0.0-alpha.13:
     rrdom "^2.0.0-alpha.13"
     rrweb-snapshot "^2.0.0-alpha.13"
 
+rsvp@^4.8.4:
+  version "4.8.5"
+  resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-4.8.5.tgz#c8f155311d167f68f21e168df71ec5b083113734"
+  integrity sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==
+
 rtl-css-js@^1.16.1:
   version "1.16.1"
   resolved "https://registry.yarnpkg.com/rtl-css-js/-/rtl-css-js-1.16.1.tgz#4b48b4354b0ff917a30488d95100fbf7219a3e80"
@@ -19709,6 +21091,11 @@ rtlcss@^4.1.0:
     postcss "^8.4.21"
     strip-json-comments "^3.1.1"
 
+run-async@^2.0.0, run-async@^2.2.0, run-async@^2.4.0:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.4.1.tgz#8440eccf99ea3e70bd409d49aab88e10c189a455"
+  integrity sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==
+
 run-parallel@^1.1.9:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.2.0.tgz#66d1368da7bdf921eb9d95bd1a9229e7f21a43ee"
@@ -19721,6 +21108,20 @@ rw@1:
   resolved "https://registry.yarnpkg.com/rw/-/rw-1.3.3.tgz#3f862dfa91ab766b14885ef4d01124bfda074fb4"
   integrity sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==
 
+rxjs@^5.5.2:
+  version "5.5.12"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-5.5.12.tgz#6fa61b8a77c3d793dbaf270bee2f43f652d741cc"
+  integrity sha512-xx2itnL5sBbqeeiVgNPVuQQ1nC8Jp2WfNJhXWHmElW9YmrpS9UVnNzhP3EH3HFqexO5Tlp8GhYY+WEcqcVMvGw==
+  dependencies:
+    symbol-observable "1.0.1"
+
+rxjs@^6.6.0:
+  version "6.6.7"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.7.tgz#90ac018acabf491bf65044235d5863c4dab804c9"
+  integrity sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==
+  dependencies:
+    tslib "^1.9.0"
+
 rxjs@^7.5.1, rxjs@^7.8.0, rxjs@^7.8.1:
   version "7.8.1"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.8.1.tgz#6f6f3d99ea8044291efd92e7c7fcf562c4057543"
@@ -19755,11 +21156,16 @@ safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
   integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
 
-safe-buffer@5.2.1, safe-buffer@>=5.1.0, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.2, safe-buffer@^5.2.1, safe-buffer@~5.2.0:
+safe-buffer@5.2.1, safe-buffer@>=5.1.0, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@^5.2.1, safe-buffer@~5.2.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
   integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
 
+safe-identifier@^0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/safe-identifier/-/safe-identifier-0.4.2.tgz#cf6bfca31c2897c588092d1750d30ef501d59fcb"
+  integrity sha512-6pNbSMW6OhAi9j+N8V+U715yBQsaWJ7eyEUaOrawX+isg5ZxhUlV1NipNtgaKHmFGiABwt+ZF04Ii+3Xjkg+8w==
+
 safe-regex-test@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/safe-regex-test/-/safe-regex-test-1.0.3.tgz#a5b4c0f06e0ab50ea2c395c14d8371232924c377"
@@ -19769,6 +21175,13 @@ safe-regex-test@^1.0.3:
     es-errors "^1.3.0"
     is-regex "^1.1.4"
 
+safe-regex@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/safe-regex/-/safe-regex-1.1.0.tgz#40a3669f3b077d1e943d44629e157dd48023bf2e"
+  integrity sha512-aJXcif4xnaNUzvUuC5gcb46oTS7zvg4jpMTnuqtrEPlR3vFr4pxtdTwaF1Qs3Enjn9HK+ZlwQui+a7z0SywIzg==
+  dependencies:
+    ret "~0.1.10"
+
 "safer-buffer@>= 2.1.2 < 3", "safer-buffer@>= 2.1.2 < 3.0.0", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
@@ -19779,13 +21192,25 @@ sample-rate@^2.0.0:
   resolved "https://registry.yarnpkg.com/sample-rate/-/sample-rate-2.0.1.tgz#3f508969262b2c729a95d4d42b795a5b33610bd0"
   integrity sha512-AIK0vVBiAEObmpJOxQu/WCyklnWGqzTSDII4O7nBo+SJHmfgBUiYhgV/Y3Ohz76gfSlU6R5CIAKggj+nAOLSvg==
 
-sandpack-file-explorer@0.0.7:
-  version "0.0.7"
-  resolved "https://registry.yarnpkg.com/sandpack-file-explorer/-/sandpack-file-explorer-0.0.7.tgz#28d1b16f866490c4a8b24c47d7eb1f27b50464d0"
-  integrity sha512-69Ytle9cC6VLtZ9ZX5Yf6Tup5lOjagQKfnsHpKOBsNQGKSVOGPEXOjkpeIncXONKdpCKOu7kAjrh3SgphUjpPg==
-  dependencies:
-    "@minoru/react-dnd-treeview" "^3.4.0"
-    react-dnd "^16.0.1"
+samsam@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/samsam/-/samsam-1.3.0.tgz#8d1d9350e25622da30de3e44ba692b5221ab7c50"
+  integrity sha512-1HwIYD/8UlOtFS3QO3w7ey+SdSDFE4HRNLZoZRYVQefrOY3l17epswImeB1ijgJFQJodIaHcwkp3r/myBjFVbg==
+
+sane@^4.0.3:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/sane/-/sane-4.1.0.tgz#ed881fd922733a6c461bc189dc2b6c006f3ffded"
+  integrity sha512-hhbzAgTIX8O7SHfp2c8/kREfEn4qO/9q8C9beyY6+tvZ87EpoZ3i1RIEvp27YBswnNbY9mWd6paKVmKbAgLfZA==
+  dependencies:
+    "@cnakazawa/watch" "^1.0.3"
+    anymatch "^2.0.0"
+    capture-exit "^2.0.0"
+    exec-sh "^0.3.2"
+    execa "^1.0.0"
+    fb-watchman "^2.0.0"
+    micromatch "^3.1.4"
+    minimist "^1.1.1"
+    walker "~1.0.5"
 
 sanitize.css@13.0.0:
   version "13.0.0"
@@ -19801,11 +21226,27 @@ sass@1.62.1:
     immutable "^4.0.0"
     source-map-js ">=0.6.2 <2.0.0"
 
+sass@^1.71.1:
+  version "1.77.6"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.77.6.tgz#898845c1348078c2e6d1b64f9ee06b3f8bd489e4"
+  integrity sha512-ByXE1oLD79GVq9Ht1PeHWCPMPB8XHpBuz1r85oByKHjZY6qV6rWnQovQzXJXuQ/XyE1Oj3iPk3lo28uzaRA2/Q==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
+    immutable "^4.0.0"
+    source-map-js ">=0.6.2 <2.0.0"
+
 sax@^1.2.4:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.4.1.tgz#44cc8988377f126304d3b3fc1010c733b929ef0f"
   integrity sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==
 
+saxes@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/saxes/-/saxes-5.0.1.tgz#eebab953fa3b7608dbe94e5dadb15c888fa6696d"
+  integrity sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==
+  dependencies:
+    xmlchars "^2.2.0"
+
 scheduler@^0.23.2:
   version "0.23.2"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.2.tgz#414ba64a3b282892e944cf2108ecc078d115cdc3"
@@ -19841,6 +21282,11 @@ schema-utils@^4.0.0, schema-utils@^4.0.1:
     ajv-formats "^2.1.1"
     ajv-keywords "^5.1.0"
 
+scoped-regex@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/scoped-regex/-/scoped-regex-1.0.0.tgz#a346bb1acd4207ae70bd7c0c7ca9e566b6baddb8"
+  integrity sha512-90/gFvaP4jXL0rXPD8FS7tWgmkQDlxCjs9cs3r3G5hAnrODt94kIh4SDbH/gm3HosGTik0omdSPOh0KQyGqjlg==
+
 screenfull@^5.1.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/screenfull/-/screenfull-5.2.0.tgz#6533d524d30621fc1283b9692146f3f13a93d1ba"
@@ -19894,16 +21340,16 @@ semver@^6.0.0, semver@^6.3.0, semver@^6.3.1:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
   integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
 
+semver@^7.1.3, semver@^7.2.1, semver@^7.6.2:
+  version "7.6.3"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.3.tgz#980f7b5550bc175fb4dc09403085627f9eb33143"
+  integrity sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==
+
 semver@^7.3.2, semver@^7.3.5, semver@^7.3.7, semver@^7.5.3, semver@^7.5.4, semver@^7.6.0:
   version "7.6.2"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.2.tgz#1e3b34759f896e8f14d6134732ce798aeb0c6e13"
   integrity sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==
 
-semver@^7.6.2, semver@^7.6.3:
-  version "7.6.3"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.3.tgz#980f7b5550bc175fb4dc09403085627f9eb33143"
-  integrity sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==
-
 send@0.18.0:
   version "0.18.0"
   resolved "https://registry.yarnpkg.com/send/-/send-0.18.0.tgz#670167cc654b05f5aa4a767f9113bb371bc706be"
@@ -20010,11 +21456,28 @@ set-function-name@^2.0.1, set-function-name@^2.0.2:
     functions-have-names "^1.2.3"
     has-property-descriptors "^1.0.2"
 
+set-getter@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/set-getter/-/set-getter-0.1.1.tgz#a3110e1b461d31a9cfc8c5c9ee2e9737ad447102"
+  integrity sha512-9sVWOy+gthr+0G9DzqqLaYNA7+5OKkSmcqjL9cBpDEaZrr3ShQlyX2cZ/O/ozE41oxn/Tt0LGEM/w4Rub3A3gw==
+  dependencies:
+    to-object-path "^0.3.0"
+
 set-harmonic-interval@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/set-harmonic-interval/-/set-harmonic-interval-1.0.1.tgz#e1773705539cdfb80ce1c3d99e7f298bb3995249"
   integrity sha512-AhICkFV84tBP1aWqPwLZqFvAwqEoVA9kxNMniGEUvzOlm4vLmOFLiTT3UZ6bziJTy4bOVpzWGTfSCbmaayGx8g==
 
+set-value@^2.0.0, set-value@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/set-value/-/set-value-2.0.1.tgz#a18d40530e6f07de4228c7defe4227af8cad005b"
+  integrity sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==
+  dependencies:
+    extend-shallow "^2.0.1"
+    is-extendable "^0.1.1"
+    is-plain-object "^2.0.3"
+    split-string "^3.0.1"
+
 setimmediate@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
@@ -20045,7 +21508,7 @@ shallow-clone@^3.0.0:
   dependencies:
     kind-of "^6.0.2"
 
-shallowequal@^1.1.0:
+shallowequal@1.1.0, shallowequal@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
   integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
@@ -20079,7 +21542,7 @@ shell-quote@^1.6.1, shell-quote@^1.7.3, shell-quote@^1.8.1:
   resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.8.1.tgz#6dbf4db75515ad5bac63b4f1894c3a154c766680"
   integrity sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==
 
-shelljs@^0.8.5:
+shelljs@^0.8.0, shelljs@^0.8.4, shelljs@^0.8.5:
   version "0.8.5"
   resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.8.5.tgz#de055408d8361bed66c669d2f000538ced8ee20c"
   integrity sha512-TiwcRcrkhHvbrZbnRcFYMLl30Dfov3HKqzp5tO5b4pt6G/SezKcYhmDg15zXVBswHmctSAQKznqNW2LO5tTDow==
@@ -20088,6 +21551,11 @@ shelljs@^0.8.5:
     interpret "^1.0.0"
     rechoir "^0.6.2"
 
+shellwords@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
+  integrity sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==
+
 shiki@^0.14.1:
   version "0.14.7"
   resolved "https://registry.yarnpkg.com/shiki/-/shiki-0.14.7.tgz#c3c9e1853e9737845f1d2ef81b31bcfb07056d4e"
@@ -20103,6 +21571,50 @@ short-unique-id@^5.0.2:
   resolved "https://registry.yarnpkg.com/short-unique-id/-/short-unique-id-5.2.0.tgz#a7e0668e0a8998d3151f27a36cf046055b1f270b"
   integrity sha512-cMGfwNyfDZ/nzJ2k2M+ClthBIh//GlZl1JEf47Uoa9XR11bz8Pa2T2wQO4bVrRdH48LrIDWJahQziKo3MjhsWg==
 
+should-equal@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/should-equal/-/should-equal-2.0.0.tgz#6072cf83047360867e68e98b09d71143d04ee0c3"
+  integrity sha512-ZP36TMrK9euEuWQYBig9W55WPC7uo37qzAEmbjHz4gfyuXrEUgF8cUvQVO+w+d3OMfPvSRQJ22lSm8MQJ43LTA==
+  dependencies:
+    should-type "^1.4.0"
+
+should-format@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/should-format/-/should-format-3.0.3.tgz#9bfc8f74fa39205c53d38c34d717303e277124f1"
+  integrity sha512-hZ58adtulAk0gKtua7QxevgUaXTTXxIi8t41L3zo9AHvjXO1/7sdLECuHeIN2SRtYXpNkmhoUP2pdeWgricQ+Q==
+  dependencies:
+    should-type "^1.3.0"
+    should-type-adaptors "^1.0.1"
+
+should-type-adaptors@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/should-type-adaptors/-/should-type-adaptors-1.1.0.tgz#401e7f33b5533033944d5cd8bf2b65027792e27a"
+  integrity sha512-JA4hdoLnN+kebEp2Vs8eBe9g7uy0zbRo+RMcU0EsNy+R+k049Ki+N5tT5Jagst2g7EAja+euFuoXFCa8vIklfA==
+  dependencies:
+    should-type "^1.3.0"
+    should-util "^1.0.0"
+
+should-type@^1.3.0, should-type@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/should-type/-/should-type-1.4.0.tgz#0756d8ce846dfd09843a6947719dfa0d4cff5cf3"
+  integrity sha512-MdAsTu3n25yDbIe1NeN69G4n6mUnJGtSJHygX3+oN0ZbO3DTiATnf7XnYJdGT42JCXurTb1JI0qOBR65shvhPQ==
+
+should-util@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/should-util/-/should-util-1.0.1.tgz#fb0d71338f532a3a149213639e2d32cbea8bcb28"
+  integrity sha512-oXF8tfxx5cDk8r2kYqlkUJzZpDBqVY/II2WhvU0n9Y3XYvAYRmeaf1PvvIvTgPnv4KJ+ES5M0PyDq5Jp+Ygy2g==
+
+should@^13.2.1:
+  version "13.2.3"
+  resolved "https://registry.yarnpkg.com/should/-/should-13.2.3.tgz#96d8e5acf3e97b49d89b51feaa5ae8d07ef58f10"
+  integrity sha512-ggLesLtu2xp+ZxI+ysJTmNjh2U0TsC+rQ/pfED9bUZZ4DKefP27D+7YJVVTvKsmjLpIi9jAa7itwDGkDDmt1GQ==
+  dependencies:
+    should-equal "^2.0.0"
+    should-format "^3.0.3"
+    should-type "^1.4.0"
+    should-type-adaptors "^1.0.1"
+    should-util "^1.0.0"
+
 side-channel@^1.0.4, side-channel@^1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.6.tgz#abd25fb7cd24baf45466406b1096b7831c9215f2"
@@ -20162,6 +21674,19 @@ simple-swizzle@^0.2.2:
   dependencies:
     is-arrayish "^0.3.1"
 
+sinon@^5.0.7:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/sinon/-/sinon-5.1.1.tgz#19c59810ffb733ea6e76a28b94a71fc4c2f523b8"
+  integrity sha512-h/3uHscbt5pQNxkf7Y/Lb9/OM44YNCicHakcq73ncbrIS8lXg+ZGOZbtuU+/km4YnyiCYfQQEwANaReJz7KDfw==
+  dependencies:
+    "@sinonjs/formatio" "^2.0.0"
+    diff "^3.5.0"
+    lodash.get "^4.4.2"
+    lolex "^2.4.2"
+    nise "^1.3.3"
+    supports-color "^5.4.0"
+    type-detect "^4.0.8"
+
 sirv@^2.0.3:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/sirv/-/sirv-2.0.4.tgz#5dd9a725c578e34e449f332703eb2a74e46a29b0"
@@ -20193,6 +21718,11 @@ skin-tone@^2.0.0:
   dependencies:
     unicode-emoji-modifier-base "^1.0.0"
 
+slash@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
+  integrity sha512-3TYDR7xWt4dIqV2JauJr+EJeW356RXijHeUlO+8djJ+uBXPn8/2dpzBc8yQhh583sVvc9CvFAeQVgijsH+PNNg==
+
 slash@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/slash/-/slash-2.0.0.tgz#de552851a1759df3a8f206535442f5ec4ddeab44"
@@ -20208,7 +21738,7 @@ slash@^4.0.0:
   resolved "https://registry.yarnpkg.com/slash/-/slash-4.0.0.tgz#2422372176c4c6c5addb5e2ada885af984b396a7"
   integrity sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==
 
-slash@^5.0.0, slash@^5.1.0:
+slash@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/slash/-/slash-5.1.0.tgz#be3adddcdf09ac38eebe8dcdc7b1a57a75b095ce"
   integrity sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==
@@ -20239,6 +21769,11 @@ slice-ansi@^5.0.0:
     ansi-styles "^6.0.0"
     is-fullwidth-code-point "^4.0.0"
 
+slugify@~1.4.7:
+  version "1.4.7"
+  resolved "https://registry.yarnpkg.com/slugify/-/slugify-1.4.7.tgz#e42359d505afd84a44513280868e31202a79a628"
+  integrity sha512-tf+h5W1IrjNm/9rKKj0JU2MDMruiopx0jjVA5zCdBtcGjfp0+c5rHw/zADLC3IeKlGHtVbHtpfzvYA0OYT+HKg==
+
 smartwrap@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/smartwrap/-/smartwrap-2.0.2.tgz#7e25d3dd58b51c6ca4aba3a9e391650ea62698a4"
@@ -20259,6 +21794,36 @@ snake-case@^3.0.4:
     dot-case "^3.0.4"
     tslib "^2.0.3"
 
+snapdragon-node@^2.0.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"
+  integrity sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==
+  dependencies:
+    define-property "^1.0.0"
+    isobject "^3.0.0"
+    snapdragon-util "^3.0.1"
+
+snapdragon-util@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/snapdragon-util/-/snapdragon-util-3.0.1.tgz#f956479486f2acd79700693f6f7b805e45ab56e2"
+  integrity sha512-mbKkMdQKsjX4BAL4bRYTj21edOf8cN7XHdYUJEe+Zn99hVEYcMvKPct1IqNe7+AZPirn8BCDOQBHQZknqmKlZQ==
+  dependencies:
+    kind-of "^3.2.0"
+
+snapdragon@^0.8.1:
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/snapdragon/-/snapdragon-0.8.2.tgz#64922e7c565b0e14204ba1aa7d6964278d25182d"
+  integrity sha512-FtyOnWN/wCHTVXOMwvSv26d+ko5vWlIDD6zoUJ7LW8vh+ZBC8QdljveRP+crNrtBwioEUWy/4dMtbBjA4ioNlg==
+  dependencies:
+    base "^0.11.1"
+    debug "^2.2.0"
+    define-property "^0.2.5"
+    extend-shallow "^2.0.1"
+    map-cache "^0.2.2"
+    source-map "^0.5.6"
+    source-map-resolve "^0.5.0"
+    use "^3.1.0"
+
 sockjs@^0.3.24:
   version "0.3.24"
   resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.24.tgz#c9bc8995f33a111bea0395ec30aa3206bdb5ccce"
@@ -20278,12 +21843,18 @@ sort-css-media-queries@2.2.0:
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"
   integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==
 
-source-map-js@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
-  integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
+source-map-resolve@^0.5.0:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a"
+  integrity sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==
+  dependencies:
+    atob "^2.1.2"
+    decode-uri-component "^0.2.0"
+    resolve-url "^0.2.1"
+    source-map-url "^0.4.0"
+    urix "^0.1.0"
 
-source-map-support@^0.5.16, source-map-support@~0.5.20:
+source-map-support@^0.5.16, source-map-support@^0.5.6, source-map-support@~0.5.20:
   version "0.5.21"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.21.tgz#04fe7c7f9e1ed2d662233c28cb2b35b9f63f6e4f"
   integrity sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==
@@ -20291,17 +21862,34 @@ source-map-support@^0.5.16, source-map-support@~0.5.20:
     buffer-from "^1.0.0"
     source-map "^0.6.0"
 
+source-map-url@^0.4.0:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.1.tgz#0af66605a745a5a2f91cf1bbf8a7afbc283dec56"
+  integrity sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==
+
 source-map@0.5.6:
   version "0.5.6"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
   integrity sha512-MjZkVp0NHr5+TPihLcadqnlVoGIoWo4IBHptutGh9wI3ttUYvCG26HkSuDi+K6lsZ25syXJXcctwgyVCt//xqA==
 
+source-map@0.8.0-beta.0:
+  version "0.8.0-beta.0"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.8.0-beta.0.tgz#d4c1bb42c3f7ee925f005927ba10709e0d1d1f11"
+  integrity sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==
+  dependencies:
+    whatwg-url "^7.0.0"
+
+source-map@^0.5.6:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+  integrity sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==
+
 source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
-source-map@^0.7.0:
+source-map@^0.7.0, source-map@^0.7.3:
   version "0.7.4"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.4.tgz#a9bbe705c9d8846f4e08ff6765acf0f1b0898656"
   integrity sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==
@@ -20373,6 +21961,22 @@ spdy@^4.0.2:
     select-hose "^2.0.0"
     spdy-transport "^3.0.0"
 
+speech-rule-engine@^4.0.6:
+  version "4.0.7"
+  resolved "https://registry.yarnpkg.com/speech-rule-engine/-/speech-rule-engine-4.0.7.tgz#b655dacbad3dae04acc0f7665e26ef258397dd09"
+  integrity sha512-sJrL3/wHzNwJRLBdf6CjJWIlxC04iYKkyXvYSVsWVOiC2DSkHmxsqOhEeMsBA9XK+CHuNcsdkbFDnoUfAsmp9g==
+  dependencies:
+    commander "9.2.0"
+    wicked-good-xpath "1.3.0"
+    xmldom-sre "0.1.31"
+
+split-string@^3.0.1, split-string@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"
+  integrity sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==
+  dependencies:
+    extend-shallow "^3.0.0"
+
 split@0.3:
   version "0.3.3"
   resolved "https://registry.yarnpkg.com/split/-/split-0.3.3.tgz#cd0eea5e63a211dfff7eb0f091c4133e2d0dd28f"
@@ -20412,6 +22016,13 @@ stack-generator@^2.0.5:
   dependencies:
     stackframe "^1.3.4"
 
+stack-utils@^2.0.2:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-2.0.6.tgz#aaf0748169c02fc33c8232abccf933f54a1cc34f"
+  integrity sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==
+  dependencies:
+    escape-string-regexp "^2.0.0"
+
 stackback@0.0.2:
   version "0.0.2"
   resolved "https://registry.yarnpkg.com/stackback/-/stackback-0.0.2.tgz#1ac8a0d9483848d1695e418b6d031a3c3ce68e3b"
@@ -20453,20 +22064,13 @@ start-server-and-test@^2.0.4:
     ps-tree "1.2.0"
     wait-on "7.2.0"
 
-state-local@^1.0.6:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/state-local/-/state-local-1.0.7.tgz#da50211d07f05748d53009bee46307a37db386d5"
-  integrity sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==
-
-static-browser-server@1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/static-browser-server/-/static-browser-server-1.0.3.tgz#9030d141b99ed92c8eec1a7546b87548fd036f5d"
-  integrity sha512-ZUyfgGDdFRbZGGJQ1YhiM930Yczz5VlbJObrQLlk24+qNHVQx4OlLcYswEUo3bIyNAbQUIUR9Yr5/Hqjzqb4zA==
+static-extend@^0.1.1:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/static-extend/-/static-extend-0.1.2.tgz#60809c39cbff55337226fd5e0b520f341f1fb5c6"
+  integrity sha512-72E9+uLc27Mt718pMHt9VMNiAL4LMsmDbBva8mxWUCkT07fSzEGMYUCk0XWY6lp0j6RBAG4cJ3mWuZv2OE3s0g==
   dependencies:
-    "@open-draft/deferred-promise" "^2.1.0"
-    dotenv "^16.0.3"
-    mime-db "^1.52.0"
-    outvariant "^1.3.0"
+    define-property "^0.2.5"
+    object-copy "^0.1.0"
 
 statuses@2.0.1:
   version "2.0.1"
@@ -20490,6 +22094,11 @@ stdin-discarder@^0.1.0:
   dependencies:
     bl "^5.0.0"
 
+stickyfill@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/stickyfill/-/stickyfill-1.1.1.tgz#39413fee9d025c74a7e59ceecb23784cc0f17f02"
+  integrity sha512-GCp7vHAfpao+Qh/3Flh9DXEJ/qSi0KJwJw6zYlZOtRYXWUIpMM6mC2rIep/dK8RQqwW0KxGJIllmjPIBOGN8AA==
+
 stop-iteration-iterator@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz#6a60be0b4ee757d1ed5254858ec66b10c49285e4"
@@ -20528,32 +22137,35 @@ stream-transform@^2.1.3:
   dependencies:
     mixme "^0.5.1"
 
-stream@^0.0.3:
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/stream/-/stream-0.0.3.tgz#3f3934a900a561ce3e2b9ffbd2819cead32699d9"
-  integrity sha512-aMsbn7VKrl4A2T7QAQQbzgN7NVc70vgF5INQrBXqn4dCXN1zy3L9HGgLO5s7PExmdrzTJ8uR/27aviW8or8/+A==
+stream@^0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/stream/-/stream-0.0.2.tgz#7f5363f057f6592c5595f00bc80a27f5cec1f0ef"
+  integrity sha512-gCq3NDI2P35B2n6t76YJuOp7d6cN/C7Rt0577l91wllh0sY9ZBuw9KaSGqH/b0hzn3CWWJbpbW0W0WvQ1H/Q7g==
   dependencies:
-    component-emitter "^2.0.0"
+    emitter-component "^1.1.1"
 
 streamsearch@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/streamsearch/-/streamsearch-1.1.0.tgz#404dd1e2247ca94af554e841a8ef0eaa238da764"
   integrity sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==
 
-strict-event-emitter@^0.4.3:
-  version "0.4.6"
-  resolved "https://registry.yarnpkg.com/strict-event-emitter/-/strict-event-emitter-0.4.6.tgz#ff347c8162b3e931e3ff5f02cfce6772c3b07eb3"
-  integrity sha512-12KWeb+wixJohmnwNFerbyiBrAlq5qJLwIt38etRtKtmmHyDSoGlIqFE9wx+4IwG0aDjI7GV8tc8ZccjWZZtTg==
-
 string-argv@0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.2.tgz#2b6d0ef24b656274d957d54e0a4bbf6153dc02b6"
   integrity sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==
 
-string-hash@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b"
-  integrity sha512-kJUvRUFK49aub+a7T1nNE66EJbZBMnBgoC1UbCZ5n6bsZKBRga4KgBRTMn/pFkeCZSYtNeSyMxPDM0AXWELk2A==
+string-length@^4.0.1:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/string-length/-/string-length-4.0.2.tgz#a8a8dc7bd5c1a82b9b3c8b87e125f66871b6e57a"
+  integrity sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ==
+  dependencies:
+    char-regex "^1.0.2"
+    strip-ansi "^6.0.0"
+
+string-template@~0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/string-template/-/string-template-0.2.1.tgz#42932e598a352d01fc22ec3367d9d84eec6c9add"
+  integrity sha512-Yptehjogou2xm4UJbxJ4CxgZx12HBfeystp0y3x7s4Dj32ltVVG1Gg8YhKjHZkHicuKpZX/ffilA8505VbUbpw==
 
 string-to-arraybuffer@^1.0.0:
   version "1.0.2"
@@ -20563,6 +22175,15 @@ string-to-arraybuffer@^1.0.0:
     atob-lite "^2.0.0"
     is-base64 "^0.1.0"
 
+"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
 string-width@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
@@ -20572,14 +22193,13 @@ string-width@^1.0.1:
     is-fullwidth-code-point "^1.0.0"
     strip-ansi "^3.0.0"
 
-"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+string-width@^2.0.0, string-width@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e"
+  integrity sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==
   dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
+    is-fullwidth-code-point "^2.0.0"
+    strip-ansi "^4.0.0"
 
 string-width@^5.0.0, string-width@^5.0.1, string-width@^5.1.2:
   version "5.1.2"
@@ -20686,6 +22306,13 @@ stringify-object@^3.3.0:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
 strip-ansi@^3.0.0, strip-ansi@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"
@@ -20693,12 +22320,12 @@ strip-ansi@^3.0.0, strip-ansi@^3.0.1:
   dependencies:
     ansi-regex "^2.0.0"
 
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+strip-ansi@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-4.0.0.tgz#a8479022eb1ac368a871389b635262c505ee368f"
+  integrity sha512-4XaJ2zQdCzROZDivEVIDPkcQn8LMFSa8kj8Gxb/Lnwzv9A8VctNZ+lfivC/sV3ivW8ElJTERXZoPBRrZKkNKow==
   dependencies:
-    ansi-regex "^5.0.1"
+    ansi-regex "^3.0.0"
 
 strip-ansi@^7.0.1, strip-ansi@^7.1.0:
   version "7.1.0"
@@ -20707,16 +22334,48 @@ strip-ansi@^7.0.1, strip-ansi@^7.1.0:
   dependencies:
     ansi-regex "^6.0.1"
 
+strip-bom-buf@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom-buf/-/strip-bom-buf-1.0.0.tgz#1cb45aaf57530f4caf86c7f75179d2c9a51dd572"
+  integrity sha512-1sUIL1jck0T1mhOLP2c696BIznzT525Lkub+n4jjMHjhjhoAQA6Ye659DxdlZBr0aLDMQoTxKIpnlqxgtwjsuQ==
+  dependencies:
+    is-utf8 "^0.2.1"
+
+strip-bom-stream@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom-stream/-/strip-bom-stream-2.0.0.tgz#f87db5ef2613f6968aa545abfe1ec728b6a829ca"
+  integrity sha512-yH0+mD8oahBZWnY43vxs4pSinn8SMKAdml/EOGBewoe1Y0Eitd0h2Mg3ZRiXruUW6L4P+lvZiEgbh0NgUGia1w==
+  dependencies:
+    first-chunk-stream "^2.0.0"
+    strip-bom "^2.0.0"
+
 strip-bom-string@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom-string/-/strip-bom-string-1.0.0.tgz#e5211e9224369fbb81d633a2f00044dc8cedad92"
   integrity sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==
 
+strip-bom@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-2.0.0.tgz#6219a85616520491f35788bdbf1447a99c7e6b0e"
+  integrity sha512-kwrX1y7czp1E69n2ajbG65mIo9dqvJ+8aBQXOGVxqwvNbsXdFM6Lq37dLAY3mknUwru8CfcCbfOLL/gMo+fi3g==
+  dependencies:
+    is-utf8 "^0.2.0"
+
 strip-bom@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
   integrity sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==
 
+strip-bom@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-4.0.0.tgz#9c3505c1db45bcedca3d9cf7a16f5c5aa3901878"
+  integrity sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==
+
+strip-eof@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf"
+  integrity sha512-7FCwGGmx8mD5xQd3RPUvnSpUXHM3BWuzjtpD4TXsfcZ9EL4azvVVUscFYwD9nx8Kh+uCBC00XBtAykoMHwTh8Q==
+
 strip-final-newline@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad"
@@ -20758,14 +22417,14 @@ strip-literal@^2.0.0:
   dependencies:
     js-tokens "^9.0.0"
 
-style-dictionary@^4.3.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/style-dictionary/-/style-dictionary-4.3.0.tgz#b5fa59500dfe8f48adb5a01a4702f4b4b61aeacb"
-  integrity sha512-bwasoBSGzIUzeZKR9HKD+qaTFzcVc3SAx+ziD41DAbDZ8OGFnfXfU3Nb3xdZb8VhxNKT21MowR5jOFvdJE9ayQ==
+style-dictionary@^4.0.0-prerelease.22, style-dictionary@^4.0.0-prerelease.38:
+  version "4.0.0-prerelease.38"
+  resolved "https://registry.yarnpkg.com/style-dictionary/-/style-dictionary-4.0.0-prerelease.38.tgz#8223c6191505e71c240f988032dadb7b42062171"
+  integrity sha512-jyoKdvyHhd8V3bwqyY/aI1AVRqOe72gm50vy+eNmJ2zzEZKEIWVWZqnSAnjLHysDwGFCkXoopaS/Gc4kj5kSRw==
   dependencies:
     "@bundled-es-modules/deepmerge" "^4.3.1"
-    "@bundled-es-modules/glob" "^10.4.2"
-    "@bundled-es-modules/memfs" "^4.9.4"
+    "@bundled-es-modules/glob" "^10.3.13"
+    "@bundled-es-modules/memfs" "^4.8.1"
     "@zip.js/zip.js" "^2.7.44"
     chalk "^5.3.0"
     change-case "^5.3.0"
@@ -20773,15 +22432,9 @@ style-dictionary@^4.3.0:
     is-plain-obj "^4.1.0"
     json5 "^2.2.2"
     patch-package "^8.0.0"
-    path-unified "^0.2.0"
-    prettier "^3.3.3"
+    path-unified "^0.1.0"
     tinycolor2 "^1.6.0"
 
-style-mod@^4.0.0, style-mod@^4.1.0:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/style-mod/-/style-mod-4.1.2.tgz#ca238a1ad4786520f7515a8539d5a63691d7bf67"
-  integrity sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw==
-
 style-to-object@^0.4.0:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/style-to-object/-/style-to-object-0.4.4.tgz#266e3dfd56391a7eefb7770423612d043c3f33ec"
@@ -20796,13 +22449,20 @@ style-to-object@^1.0.0:
   dependencies:
     inline-style-parser "0.2.3"
 
-style-value-types@5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-5.0.0.tgz#76c35f0e579843d523187989da866729411fc8ad"
-  integrity sha512-08yq36Ikn4kx4YU6RD7jWEv27v4V+PUsOGa4n/as8Et3CuODMJQ00ENeAVXAeydX4Z2j1XHZF1K2sX4mGl18fA==
-  dependencies:
-    hey-listen "^1.0.8"
-    tslib "^2.1.0"
+styled-components@^6.0.5:
+  version "6.1.11"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-6.1.11.tgz#01948e5195bf1d39e57e0a85b41958c80e40cfb8"
+  integrity sha512-Ui0jXPzbp1phYij90h12ksljKGqF8ncGx+pjrNPsSPhbUUjWT2tD1FwGo2LF6USCnbrsIhNngDfodhxbegfEOA==
+  dependencies:
+    "@emotion/is-prop-valid" "1.2.2"
+    "@emotion/unitless" "0.8.1"
+    "@types/stylis" "4.2.5"
+    css-to-react-native "3.2.0"
+    csstype "3.1.3"
+    postcss "8.4.38"
+    shallowequal "1.1.0"
+    stylis "4.3.2"
+    tslib "2.6.2"
 
 styled-jsx@5.1.1:
   version "5.1.1"
@@ -20819,19 +22479,24 @@ stylehacks@^6.1.1:
     browserslist "^4.23.0"
     postcss-selector-parser "^6.0.16"
 
-stylehacks@^7.0.4:
-  version "7.0.4"
-  resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-7.0.4.tgz#9c21f7374f4bccc0082412b859b3c89d77d3277c"
-  integrity sha512-i4zfNrGMt9SB4xRK9L83rlsFCgdGANfeDAYacO1pkqcE7cRHPdWHwnKZVz7WY17Veq/FvyYsRAU++Ga+qDFIww==
-  dependencies:
-    browserslist "^4.23.3"
-    postcss-selector-parser "^6.1.2"
-
-stylis@^4.1.3, stylis@^4.3.0:
+stylis@4.3.2, stylis@^4.1.3, stylis@^4.3.0:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.3.2.tgz#8f76b70777dd53eb669c6f58c997bf0a9972e444"
   integrity sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==
 
+sucrase@^3.20.3:
+  version "3.35.0"
+  resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.35.0.tgz#57f17a3d7e19b36d8995f06679d121be914ae263"
+  integrity sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.2"
+    commander "^4.0.0"
+    glob "^10.3.10"
+    lines-and-columns "^1.1.6"
+    mz "^2.7.0"
+    pirates "^4.0.1"
+    ts-interface-checker "^0.1.9"
+
 supports-color@5.4.0:
   version "5.4.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.4.0.tgz#1c6b337402c2137605efe19f10fec390f6faab54"
@@ -20839,14 +22504,19 @@ supports-color@5.4.0:
   dependencies:
     has-flag "^3.0.0"
 
-supports-color@^5.3.0:
+supports-color@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
+  integrity sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==
+
+supports-color@^5.3.0, supports-color@^5.4.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
   integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
   dependencies:
     has-flag "^3.0.0"
 
-supports-color@^7.1.0:
+supports-color@^7.0.0, supports-color@^7.1.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
   integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
@@ -20865,6 +22535,14 @@ supports-color@^9.4.0:
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-9.4.0.tgz#17bfcf686288f531db3dea3215510621ccb55954"
   integrity sha512-VL+lNrEoIXww1coLPOmiEmK/0sGigko5COxI09KzHc2VJXJsQ37UaQ+8quuxjDeA7+KnLGTWRyOXSLLR2Wb4jw==
 
+supports-hyperlinks@^2.0.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/supports-hyperlinks/-/supports-hyperlinks-2.3.0.tgz#3943544347c1ff90b15effb03fc14ae45ec10624"
+  integrity sha512-RpsAZlpWcDwOPQA22aCH4J0t7L8JmAvsCxfOSEwm7cQs3LshN36QaTkwd70DnBOXDWGssw2eUoc8CaRWT0XunA==
+  dependencies:
+    has-flag "^4.0.0"
+    supports-color "^7.0.0"
+
 supports-preserve-symlinks-flag@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
@@ -20875,7 +22553,7 @@ svg-parser@^2.0.4:
   resolved "https://registry.yarnpkg.com/svg-parser/-/svg-parser-2.0.4.tgz#fdc2e29e13951736140b76cb122c8ee6630eb6b5"
   integrity sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==
 
-svgo@^3.0.2, svgo@^3.2.0, svgo@^3.3.2:
+svgo@^3.0.2, svgo@^3.2.0:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/svgo/-/svgo-3.3.2.tgz#ad58002652dffbb5986fc9716afe52d869ecbda8"
   integrity sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==
@@ -20950,11 +22628,46 @@ swagger-ui-react@5.17.14:
     xml-but-prettier "^1.0.1"
     zenscroll "^4.0.2"
 
+swagger2openapi@^7.0.6:
+  version "7.0.8"
+  resolved "https://registry.yarnpkg.com/swagger2openapi/-/swagger2openapi-7.0.8.tgz#12c88d5de776cb1cbba758994930f40ad0afac59"
+  integrity sha512-upi/0ZGkYgEcLeGieoz8gT74oWHA0E7JivX7aN9mAf+Tc7BQoRBvnIGHoPDw+f9TXTW4s6kGYCZJtauP6OYp7g==
+  dependencies:
+    call-me-maybe "^1.0.1"
+    node-fetch "^2.6.1"
+    node-fetch-h2 "^2.3.0"
+    node-readfiles "^0.2.0"
+    oas-kit-common "^1.0.8"
+    oas-resolver "^2.5.6"
+    oas-schema-walker "^1.1.5"
+    oas-validator "^5.0.8"
+    reftools "^1.1.9"
+    yaml "^1.10.0"
+    yargs "^17.0.1"
+
+symbol-observable@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.1.tgz#8340fc4702c3122df5d22288f88283f513d3fdd4"
+  integrity sha512-Kb3PrPYz4HanVF1LVGuAdW6LoVgIwjUYJGzFe7NDrBLCN4lsV/5J0MFurV+ygS4bRVwrCEt2c7MQ1R2a72oJDw==
+
+symbol-tree@^3.2.4:
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
+  integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
+
 tabbable@^6.1.1, tabbable@^6.2.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.2.0.tgz#732fb62bc0175cfcec257330be187dcfba1f3b97"
   integrity sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==
 
+taketalk@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/taketalk/-/taketalk-1.0.0.tgz#b4d4f0deed206ae7df775b129ea2ca6de52f26dd"
+  integrity sha512-kS7E53It6HA8S1FVFBWP7HDwgTiJtkmYk7TsowGlizzVrivR1Mf9mgjXHY1k7rOfozRVMZSfwjB3bevO4QEqpg==
+  dependencies:
+    get-stdin "^4.0.1"
+    minimist "^1.1.0"
+
 tapable@^1.0.0:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
@@ -21045,6 +22758,14 @@ term-size@^2.1.0:
   resolved "https://registry.yarnpkg.com/term-size/-/term-size-2.2.1.tgz#2a6a54840432c2fb6320fea0f415531e90189f54"
   integrity sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg==
 
+terminal-link@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/terminal-link/-/terminal-link-2.1.1.tgz#14a64a27ab3c0df933ea546fba55f2d078edc994"
+  integrity sha512-un0FmiRUQNr5PJqy9kP7c40F5BOfpGlYTrxonDChEZB7pzZxRNp/bt+ymiy9/npwXya9KH99nJ/GXFIiUkYGFQ==
+  dependencies:
+    ansi-escapes "^4.2.1"
+    supports-hyperlinks "^2.0.0"
+
 terser-webpack-plugin@^5.3.10, terser-webpack-plugin@^5.3.9:
   version "5.3.10"
   resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.3.10.tgz#904f4c9193c6fd2a03f693a2150c62a92f40d199"
@@ -21080,16 +22801,35 @@ text-table@^0.2.0:
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==
 
-thenby@^1.3.4:
-  version "1.3.4"
-  resolved "https://registry.yarnpkg.com/thenby/-/thenby-1.3.4.tgz#81581f6e1bb324c6dedeae9bfc28e59b1a2201cc"
-  integrity sha512-89Gi5raiWA3QZ4b2ePcEwswC3me9JIg+ToSgtE0JWeCynLnLxNr/f9G+xfo9K+Oj4AFdom8YNJjibIARTJmapQ==
+textextensions@^2.5.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/textextensions/-/textextensions-2.6.0.tgz#d7e4ab13fe54e32e08873be40d51b74229b00fc4"
+  integrity sha512-49WtAWS+tcsy93dRt6P0P3AMD2m5PvXRhuEA0kaXos5ZLlujtYmpmFsB+QvWUSxE1ZsstmYXfQ7L40+EcQgpAQ==
+
+thenify-all@^1.0.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/thenify-all/-/thenify-all-1.6.0.tgz#1a1918d402d8fc3f98fbf234db0bcc8cc10e9726"
+  integrity sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==
+  dependencies:
+    thenify ">= 3.1.0 < 4"
+
+"thenify@>= 3.1.0 < 4":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/thenify/-/thenify-3.3.1.tgz#8932e686a4066038a016dd9e2ca46add9838a95f"
+  integrity sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==
+  dependencies:
+    any-promise "^1.0.0"
 
 thingies@^1.20.0:
   version "1.21.0"
   resolved "https://registry.yarnpkg.com/thingies/-/thingies-1.21.0.tgz#e80fbe58fd6fdaaab8fad9b67bd0a5c943c445c1"
   integrity sha512-hsqsJsFMsV+aD4s3CWKk85ep/3I9XzYV/IXaSouJMYIoDlgyi11cBhsqYe9/geRfB0YIikBQg6raRaM+nIMP9g==
 
+throat@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/throat/-/throat-5.0.0.tgz#c5199235803aad18754a667d659b5e72ce16764b"
+  integrity sha512-fcwX4mndzpLQKBS1DVYhGAcYaYt7vsHNIvQV+WXMvnow5cgjPphq5CaayLaGsjRdSCKZFNGt7/GYAuXaNOiYCA==
+
 throttle-debounce@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-3.0.1.tgz#32f94d84dfa894f786c9a1f290e7a645b6a19abb"
@@ -21100,7 +22840,7 @@ throttleit@^1.0.0:
   resolved "https://registry.yarnpkg.com/throttleit/-/throttleit-1.0.1.tgz#304ec51631c3b770c65c6c6f76938b384000f4d5"
   integrity sha512-vDZpf9Chs9mAdfY046mcPt8fg5QSZr37hEH4TXYBnDF+izxgrbRGUAAaBvIk/fJm9aOFCGFd1EsNg5AZCbnQCQ==
 
-through2@^2.0.3:
+through2@^2.0.0, through2@^2.0.3:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
   integrity sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==
@@ -21108,7 +22848,15 @@ through2@^2.0.3:
     readable-stream "~2.3.6"
     xtend "~4.0.1"
 
-through@2, through@^2.3.8, through@~2.3, through@~2.3.1:
+through2@^3.0.0, through2@^3.0.1, through2@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/through2/-/through2-3.0.2.tgz#99f88931cfc761ec7678b41d5d7336b5b6a07bf4"
+  integrity sha512-enaDQ4MUyP2W6ZyT6EsMzqBPZaM/avg8iuo+l2d3QCs0J+6RaqkHV/2/lOwDTueBHeJ/2LG9lrLW3d5rWPucuQ==
+  dependencies:
+    inherits "^2.0.4"
+    readable-stream "2 || 3"
+
+through@2, "through@>=2.2.7 <3", through@^2.3.6, through@^2.3.8, through@~2.3, through@~2.3.1:
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
   integrity sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==
@@ -21118,6 +22866,11 @@ thunky@^1.0.2:
   resolved "https://registry.yarnpkg.com/thunky/-/thunky-1.1.0.tgz#5abaf714a9405db0504732bbccd2cedd9ef9537d"
   integrity sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==
 
+timed-out@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/timed-out/-/timed-out-4.0.1.tgz#f32eacac5a175bea25d7fab565ab3ed8741ef56f"
+  integrity sha512-G7r3AhovYtr5YKOWQkta8RKAPb+J9IsO4uVmzjl8AZwfhs8UcUwTiD6gcJYSgOtzyjvQKrKYn41syHbUWMkafA==
+
 tiny-invariant@^1.0.2, tiny-invariant@^1.3.1, tiny-invariant@^1.3.3:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.3.3.tgz#46680b7a873a0d5d10005995eb90a70d74d60127"
@@ -21160,11 +22913,31 @@ tmp@~0.2.1:
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.3.tgz#eb783cc22bc1e8bebd0671476d46ea4eb32a79ae"
   integrity sha512-nZD7m9iCPC5g0pYmcaxogYKggSfLsdxl8of3Q/oIbqCqLLIO9IAF0GWjX1z9NZRHPiXv8Wex4yDCaZsgEw0Y8w==
 
+tmpl@1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.5.tgz#8683e0b902bb9c20c4f726e3c0b69f36518c07cc"
+  integrity sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==
+
 to-fast-properties@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
   integrity sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==
 
+to-object-path@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/to-object-path/-/to-object-path-0.3.0.tgz#297588b7b0e7e0ac08e04e672f85c1f4999e17af"
+  integrity sha512-9mWHdnGRuh3onocaHzukyvCZhzvr6tiflAy/JRFXcJX0TjgfWA9pk9t8CMbzmBE4Jfw58pXbkngtBtqYxzNEyg==
+  dependencies:
+    kind-of "^3.0.2"
+
+to-regex-range@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-2.1.1.tgz#7c80c17b9dfebe599e27367e0d4dd5590141db38"
+  integrity sha512-ZZWNfCjUokXXDGXFpZehJIkZqq91BcULFq/Pi7M5i4JnxXdhMKAK682z8bCW3o8Hj1wuuzoKcW3DfVzaP6VuNg==
+  dependencies:
+    is-number "^3.0.0"
+    repeat-string "^1.6.1"
+
 to-regex-range@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
@@ -21172,6 +22945,16 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
+to-regex@^3.0.1, to-regex@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/to-regex/-/to-regex-3.0.2.tgz#13cfdd9b336552f30b51f33a8ae1b42a7a7599ce"
+  integrity sha512-FWtleNAtZ/Ki2qtqej2CXTOayOH9bHDQF+Q48VpWyDXjbYxA4Yz8iDB31zXOBUlOHHKidDbqGVrTUvQMPmBGBw==
+  dependencies:
+    define-property "^2.0.2"
+    extend-shallow "^3.0.2"
+    regex-not "^1.0.2"
+    safe-regex "^1.1.0"
+
 tocbot@^4.20.1:
   version "4.28.2"
   resolved "https://registry.yarnpkg.com/tocbot/-/tocbot-4.28.2.tgz#5a51b34cefd39f6b556b936b380a838a0a8c49ea"
@@ -21199,7 +22982,7 @@ totalist@^3.0.0:
   resolved "https://registry.yarnpkg.com/totalist/-/totalist-3.0.1.tgz#ba3a3d600c915b1a97872348f79c127475f6acf8"
   integrity sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==
 
-tough-cookie@^4.1.3:
+tough-cookie@^4.0.0, tough-cookie@^4.1.3:
   version "4.1.4"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.1.4.tgz#945f1461b45b5a8c76821c33ea49c3ac192c1b36"
   integrity sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==
@@ -21209,6 +22992,20 @@ tough-cookie@^4.1.3:
     universalify "^0.2.0"
     url-parse "^1.5.3"
 
+tr46@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-1.0.1.tgz#a8b13fd6bfd2489519674ccde55ba3693b706d09"
+  integrity sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==
+  dependencies:
+    punycode "^2.1.0"
+
+tr46@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-2.1.0.tgz#fa87aa81ca5d5941da8cbf1f9b749dc969a4e240"
+  integrity sha512-15Ih7phfcdP5YxqiB+iDtLoaTz4Nd35+IiAv0kQ5FNKHzXgdWqPoTIqEDDJmXceQt4JZk6lVPT8lnDlPpGDppw==
+  dependencies:
+    punycode "^2.1.1"
+
 tr46@~0.0.3:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
@@ -21302,12 +23099,17 @@ ts-easing@^0.2.0:
   resolved "https://registry.yarnpkg.com/ts-easing/-/ts-easing-0.2.0.tgz#c8a8a35025105566588d87dbda05dd7fbfa5a4ec"
   integrity sha512-Z86EW+fFFh/IFB1fqQ3/+7Zpf9t2ebOAxNI/V6Wo7r5gqiqtxmgTlQ1qbqQcjLKYeSHPTsEmvlJUDg/EuL0uHQ==
 
+ts-interface-checker@^0.1.9:
+  version "0.1.13"
+  resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
+  integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
+
 ts-mixer@^6.0.3, ts-mixer@^6.0.4:
   version "6.0.4"
   resolved "https://registry.yarnpkg.com/ts-mixer/-/ts-mixer-6.0.4.tgz#1da39ceabc09d947a82140d9f09db0f84919ca28"
   integrity sha512-ufKpbmrugz5Aou4wcr5Wc1UUFWOLhq+Fm6qa6P0w0K5Qw2yhaUoiWszhCVuNQyNwrlGiscHOmqYoAox1PtvgjA==
 
-ts-node@^10.9.1:
+ts-node@^10.9.1, ts-node@^10.9.2:
   version "10.9.2"
   resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-10.9.2.tgz#70f021c9e185bccdca820e26dc413805c101c71f"
   integrity sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==
@@ -21326,18 +23128,6 @@ ts-node@^10.9.1:
     v8-compile-cache-lib "^3.0.1"
     yn "3.1.1"
 
-ts-patch@^3.3.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/ts-patch/-/ts-patch-3.3.0.tgz#a33a84b6c60c4b73848d7a7d95791722e1ee8e88"
-  integrity sha512-zAOzDnd5qsfEnjd9IGy1IRuvA7ygyyxxdxesbhMdutt8AHFjD8Vw8hU2rMF89HX1BKRWFYqKHrO8Q6lw0NeUZg==
-  dependencies:
-    chalk "^4.1.2"
-    global-prefix "^4.0.0"
-    minimist "^1.2.8"
-    resolve "^1.22.2"
-    semver "^7.6.3"
-    strip-ansi "^6.0.1"
-
 ts-toolbelt@^9.6.0:
   version "9.6.0"
   resolved "https://registry.yarnpkg.com/ts-toolbelt/-/ts-toolbelt-9.6.0.tgz#50a25426cfed500d4a09bd1b3afb6f28879edfd5"
@@ -21367,7 +23157,12 @@ tsconfig-paths@^4.2.0:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
-tslib@^1.13.0:
+tslib@2.6.2:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
+  integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
+
+tslib@^1.13.0, tslib@^1.9.0:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
@@ -21377,10 +23172,25 @@ tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.3.0, tslib@^2.4
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.3.tgz#0438f810ad7a9edcde7a241c3d80db693c8cbfe0"
   integrity sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==
 
-tslib@^2.3.1:
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.0.tgz#d124c86c3c05a40a91e6fdea4021bd31d377971b"
-  integrity sha512-jWVzBLplnCmoaTr13V9dYbiQ99wvZRd0vNWaDRg+aVYRcjDF3nDksxFDE/+fkXnKhpnUUkmx5pK/v8mCtLVqZA==
+tsup@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/tsup/-/tsup-8.1.0.tgz#354ce9def1721f5029564382ea2a42dc67fbb489"
+  integrity sha512-UFdfCAXukax+U6KzeTNO2kAARHcWxmKsnvSPXUcfA1D+kU05XDccCrkffCQpFaWDsZfV0jMyTsxU39VfCp6EOg==
+  dependencies:
+    bundle-require "^4.0.0"
+    cac "^6.7.12"
+    chokidar "^3.5.1"
+    debug "^4.3.1"
+    esbuild "^0.21.4"
+    execa "^5.0.0"
+    globby "^11.0.3"
+    joycon "^3.0.1"
+    postcss-load-config "^4.0.1"
+    resolve-from "^5.0.0"
+    rollup "^4.0.2"
+    source-map "0.8.0-beta.0"
+    sucrase "^3.20.3"
+    tree-kill "^1.2.2"
 
 tsx@^4.9.3:
   version "4.15.7"
@@ -21442,7 +23252,7 @@ turbo-windows-arm64@1.13.4:
   resolved "https://registry.yarnpkg.com/turbo-windows-arm64/-/turbo-windows-arm64-1.13.4.tgz#0adfddb0d6c167a46ecff646666e347a7d372d76"
   integrity sha512-u5A+VOKHswJJmJ8o8rcilBfU5U3Y1TTAfP9wX8bFh8teYF1ghP0EhtMRLjhtp6RPa+XCxHHVA2CiC3gbh5eg5g==
 
-turbo@^1.13.3:
+turbo@^1.9.8:
   version "1.13.4"
   resolved "https://registry.yarnpkg.com/turbo/-/turbo-1.13.4.tgz#06767fff53f0aae43f78e12e5ac7d5e7652d40d0"
   integrity sha512-1q7+9UJABuBAHrcC4Sxp5lOqYS5mvxRrwa33wpIyM18hlOCpRD/fTJNxZ0vhbMcJmz15o9kkVm743mPn7p6jpQ==
@@ -21471,7 +23281,7 @@ type-check@^0.4.0, type-check@~0.4.0:
   dependencies:
     prelude-ls "^1.2.1"
 
-type-detect@^4.0.0, type-detect@^4.0.8:
+type-detect@4.0.8, type-detect@^4.0.0, type-detect@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.8.tgz#7646fb5f18871cfbb7749e69bd39a6388eb7450c"
   integrity sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==
@@ -21602,13 +23412,6 @@ types-ramda@^0.30.1:
   dependencies:
     ts-toolbelt "^9.6.0"
 
-typescript-transform-paths@^3.5.1:
-  version "3.5.1"
-  resolved "https://registry.yarnpkg.com/typescript-transform-paths/-/typescript-transform-paths-3.5.1.tgz#472a4223ad9463b88fd9ef3dc1ec0616018c4294"
-  integrity sha512-nq+exuF+38rAby9zrP+S6t0HWuwv69jeFu0I5UwjdoCIDPmnKIAr6a7JfYkbft7h5OzYKEDRhT/jLvvtTvWF4Q==
-  dependencies:
-    minimatch "^9.0.5"
-
 typescript@^5.4.5:
   version "5.5.2"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.5.2.tgz#c26f023cb0054e657ce04f72583ea2d85f8d0507"
@@ -21639,11 +23442,6 @@ undici-types@~5.26.4:
   resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.26.5.tgz#bcd539893d00b56e964fd2657a4866b221a65617"
   integrity sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==
 
-undici-types@~6.19.2:
-  version "6.19.8"
-  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.19.8.tgz#35111c9d1437ab83a7cdc0abae2f26d88eda0a02"
-  integrity sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==
-
 undo-manager@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/undo-manager/-/undo-manager-1.1.1.tgz#a0017cf4e2bea3427997c94d23125ebde20a010b"
@@ -21695,6 +23493,16 @@ unified@^11.0.0, unified@^11.0.3, unified@^11.0.4, unified@~11.0.0:
     trough "^2.0.0"
     vfile "^6.0.0"
 
+union-value@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/union-value/-/union-value-1.0.1.tgz#0b6fe7b835aecda61c6ea4d4f02c14221e109847"
+  integrity sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==
+  dependencies:
+    arr-union "^3.1.0"
+    get-value "^2.0.6"
+    is-extendable "^0.1.1"
+    set-value "^2.0.1"
+
 unique-string@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/unique-string/-/unique-string-3.0.0.tgz#84a1c377aff5fd7a8bc6b55d8244b2bd90d75b9a"
@@ -21806,11 +23614,29 @@ unraw@^3.0.0:
   resolved "https://registry.yarnpkg.com/unraw/-/unraw-3.0.0.tgz#73443ed70d2ab09ccbac2b00525602d5991fbbe3"
   integrity sha512-08/DA66UF65OlpUDIQtbJyrqTR0jTAlJ+jsnkQ4jxR7+K5g5YG1APZKQSMCE1vqqmD+2pv6+IdEjmopFatacvg==
 
+unset-value@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/unset-value/-/unset-value-1.0.0.tgz#8376873f7d2335179ffb1e6fc3a8ed0dfc8ab559"
+  integrity sha512-PcA2tsuGSF9cnySLHTLSh2qrQiJ70mn+r+Glzxv2TWZblxsxCC52BDlZoPCsz7STd9pN7EZetkWZBAvk4cgZdQ==
+  dependencies:
+    has-value "^0.3.1"
+    isobject "^3.0.0"
+
+untildify@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/untildify/-/untildify-3.0.3.tgz#1e7b42b140bcfd922b22e70ca1265bfe3634c7c9"
+  integrity sha512-iSk/J8efr8uPT/Z4eSUywnqyrQU7DSdMfdqK4iWEaUVVmcP5JcnpRqmVMwcwcnmI1ATFNgC5V90u09tBynNFKA==
+
 untildify@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/untildify/-/untildify-4.0.0.tgz#2bc947b953652487e4600949fb091e3ae8cd919b"
   integrity sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==
 
+unzip-response@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/unzip-response/-/unzip-response-2.0.1.tgz#d2f0f737d16b0615e72a6935ed04214572d56f97"
+  integrity sha512-N0XH6lqDtFH84JxptQoZYmloF4nzrQqqrAymNj+/gW60AO2AZgOcf4O/nUXJcYfyQkqvMo9lSupBZmmgvuVXlw==
+
 update-browserslist-db@^1.0.16:
   version "1.0.16"
   resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.16.tgz#f6d489ed90fb2f07d67784eb3f53d7891f736356"
@@ -21861,6 +23687,11 @@ uri-js@^4.2.2, uri-js@^4.4.1:
   dependencies:
     punycode "^2.1.0"
 
+urix@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
+  integrity sha512-Am1ousAhSLBeB9cG/7k7r2R0zj50uDRlZHPGbazid5s9rlF1F/QKYObEKSIunSjIOkJZqwRRLpvewjEkM7pSqg==
+
 url-loader@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-4.1.1.tgz#28505e905cae158cf07c92ca622d7f237e70a4e2"
@@ -21870,6 +23701,13 @@ url-loader@^4.1.1:
     mime-types "^2.1.27"
     schema-utils "^3.0.0"
 
+url-parse-lax@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/url-parse-lax/-/url-parse-lax-1.0.0.tgz#7af8f303645e9bd79a272e7a14ac68bc0609da73"
+  integrity sha512-BVA4lR5PIviy2PMseNd2jbFQ+jwSwQGdJejf5ctd1rEXt0Ypd7yanUK9+lYechVlN5VaTJGsu2U/3MDDu6KgBA==
+  dependencies:
+    prepend-http "^1.0.1"
+
 url-parse@^1.5.10, url-parse@^1.5.3:
   version "1.5.10"
   resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.10.tgz#9d3c2f736c1d75dd3bd2be507dcc111f1e2ea9c1"
@@ -21878,13 +23716,23 @@ url-parse@^1.5.10, url-parse@^1.5.3:
     querystringify "^2.1.1"
     requires-port "^1.0.0"
 
-url@^0.11.3:
-  version "0.11.4"
-  resolved "https://registry.yarnpkg.com/url/-/url-0.11.4.tgz#adca77b3562d56b72746e76b330b7f27b6721f3c"
-  integrity sha512-oCwdVC7mTuWiPyjLUz/COz5TLk6wgp0RCsN+wHZ2Ekneac9w8uuV0njcbbie2ME+Vs+d6duwmYuR3HgQXs1fOg==
+url-template@^2.0.8:
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/url-template/-/url-template-2.0.8.tgz#fc565a3cccbff7730c775f5641f9555791439f21"
+  integrity sha512-XdVKMF4SJ0nP/O7XIPB0JwAEuT9lDIYnNsK8yGVe43y0AWoKeJNdv3ZNWh7ksJ6KqQFjOO6ox/VEitLnaVNufw==
+
+url-to-options@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/url-to-options/-/url-to-options-1.0.1.tgz#1505a03a289a48cbd7a434efbaeec5055f5633a9"
+  integrity sha512-0kQLIzG4fdk/G5NONku64rSH/x32NOA39LVQqlK8Le6lvTF6GGRJpqaQFGgU+CLwySIqBSMdwYM0sYcW9f6P4A==
+
+url@^0.11.1:
+  version "0.11.3"
+  resolved "https://registry.yarnpkg.com/url/-/url-0.11.3.tgz#6f495f4b935de40ce4a0a52faee8954244f3d3ad"
+  integrity sha512-6hxOLGfZASQK/cijlZnZJTq8OXAkt/3YGfQX45vvMYXpZoo8NdWZcY73K108Jf759lS1Bv/8wXnHDTSz17dSRw==
   dependencies:
     punycode "^1.4.1"
-    qs "^6.12.3"
+    qs "^6.11.2"
 
 use-callback-ref@^1.3.0:
   version "1.3.2"
@@ -21893,7 +23741,7 @@ use-callback-ref@^1.3.0:
   dependencies:
     tslib "^2.0.0"
 
-use-resize-observer@^9:
+use-resize-observer@^9.0.0:
   version "9.1.0"
   resolved "https://registry.yarnpkg.com/use-resize-observer/-/use-resize-observer-9.1.0.tgz#14735235cf3268569c1ea468f8a90c5789fc5c6c"
   integrity sha512-R25VqO9Wb3asSD4eqtcxk8sJalvIOYBqS8MNZlpDSQ4l4xMQxC/J7Id9HoTqPq8FwULIn0PVW+OAqF2dyYbjow==
@@ -21918,6 +23766,11 @@ use-sync-external-store@^1.0.0, use-sync-external-store@^1.2.0:
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz#c3b6390f3a30eba13200d2302dcdf1e7b57b2ef9"
   integrity sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==
 
+use@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
+  integrity sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==
+
 utf-8-validate@^5.0.2:
   version "5.0.10"
   resolved "https://registry.yarnpkg.com/utf-8-validate/-/utf-8-validate-5.0.10.tgz#d7d10ea39318171ca982718b6b96a8d2442571a2"
@@ -21993,6 +23846,15 @@ v8-compile-cache-lib@^3.0.1:
   resolved "https://registry.yarnpkg.com/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz#6336e8d71965cb3d35a1bbb7868445a7c05264bf"
   integrity sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==
 
+v8-to-istanbul@^7.0.0:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-7.1.2.tgz#30898d1a7fa0c84d225a2c1434fb958f290883c1"
+  integrity sha512-TxNb7YEUwkLXCQYeudi6lgQ/SZrzNO4kMdlqVxaZPUIUjCv6iSSypUQX70kNBSERpQ8fk48+d61FXk+tgqcWow==
+  dependencies:
+    "@types/istanbul-lib-coverage" "^2.0.1"
+    convert-source-map "^1.6.0"
+    source-map "^0.7.3"
+
 v8-to-istanbul@^9.0.0:
   version "9.3.0"
   resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-9.3.0.tgz#b9572abfa62bd556c16d75fdebc1a411d5ff3175"
@@ -22059,6 +23921,29 @@ vfile@^6.0.0, vfile@^6.0.1:
     unist-util-stringify-position "^4.0.0"
     vfile-message "^4.0.0"
 
+vinyl-file@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/vinyl-file/-/vinyl-file-3.0.0.tgz#b104d9e4409ffa325faadd520642d0a3b488b365"
+  integrity sha512-BoJDj+ca3D9xOuPEM6RWVtWQtvEPQiQYn82LvdxhLWplfQsBzBqtgK0yhCP0s1BNTi6dH9BO+dzybvyQIacifg==
+  dependencies:
+    graceful-fs "^4.1.2"
+    pify "^2.3.0"
+    strip-bom-buf "^1.0.0"
+    strip-bom-stream "^2.0.0"
+    vinyl "^2.0.1"
+
+vinyl@^2.0.1, vinyl@^2.2.0, vinyl@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/vinyl/-/vinyl-2.2.1.tgz#23cfb8bbab5ece3803aa2c0a1eb28af7cbba1974"
+  integrity sha512-LII3bXRFBZLlezoG5FfZVcXflZgWP/4dCwKtxd5ky9+LOtM4CS3bIRQsmR1KMnMW07jpE8fqR2lcxPZ+8sJIcw==
+  dependencies:
+    clone "^2.1.1"
+    clone-buffer "^1.0.0"
+    clone-stats "^1.0.0"
+    cloneable-readable "^1.0.0"
+    remove-trailing-separator "^1.0.1"
+    replace-ext "^1.0.0"
+
 vite-node@1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/vite-node/-/vite-node-1.6.0.tgz#2c7e61129bfecc759478fa592754fd9704aaba7f"
@@ -22070,6 +23955,11 @@ vite-node@1.6.0:
     picocolors "^1.0.0"
     vite "^5.0.0"
 
+vite-plugin-babel@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/vite-plugin-babel/-/vite-plugin-babel-1.2.0.tgz#0d803d489c2a7e63ceb93e37533de298e1537c71"
+  integrity sha512-ltAnq535Ubf9sDbVCkztAdkwx5aQbNrwPFs+iZTJ5FaAhTdxjqmLGpxsAaRfJWEKBJ/kFf9KwMoTdArm0IRUUw==
+
 vite-tsconfig-paths@^4.2.2:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/vite-tsconfig-paths/-/vite-tsconfig-paths-4.3.2.tgz#321f02e4b736a90ff62f9086467faf4e2da857a9"
@@ -22137,10 +24027,19 @@ vscode-textmate@^8.0.0:
   resolved "https://registry.yarnpkg.com/vscode-textmate/-/vscode-textmate-8.0.0.tgz#2c7a3b1163ef0441097e0b5d6389cd5504b59e5d"
   integrity sha512-AFbieoL7a5LMqcnOF04ji+rpXadgOXnZsxQr//r83kLPr7biP7am3g9zbaZIaBGwBRWeSvoMD4mgPdX3e4NWBg==
 
-w3c-keyname@^2.2.4:
-  version "2.2.8"
-  resolved "https://registry.yarnpkg.com/w3c-keyname/-/w3c-keyname-2.2.8.tgz#7b17c8c6883d4e8b86ac8aba79d39e880f8869c5"
-  integrity sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==
+w3c-hr-time@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz#0a89cdf5cc15822df9c360543676963e0cc308cd"
+  integrity sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==
+  dependencies:
+    browser-process-hrtime "^1.0.0"
+
+w3c-xmlserializer@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/w3c-xmlserializer/-/w3c-xmlserializer-2.0.0.tgz#3e7104a05b75146cc60f564380b7f683acf1020a"
+  integrity sha512-4tzD0mF8iSiMiNs30BiLO3EpfGLZUT2MSX/G+o7ZywDzliWQ3OPtTZ0PTC3B3ca1UAf4cJMHB+2Bf56EriJuRA==
+  dependencies:
+    xml-name-validator "^3.0.0"
 
 wait-on@7.2.0:
   version "7.2.0"
@@ -22153,6 +24052,13 @@ wait-on@7.2.0:
     minimist "^1.2.8"
     rxjs "^7.8.1"
 
+walker@^1.0.7, walker@~1.0.5:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/walker/-/walker-1.0.8.tgz#bd498db477afe573dc04185f011d3ab8a8d7653f"
+  integrity sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==
+  dependencies:
+    makeerror "1.0.12"
+
 wasm-import@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/wasm-import/-/wasm-import-0.3.0.tgz#e8173eb60b41e4fd4c8a21d7bc4261f65e226fa4"
@@ -22215,10 +24121,15 @@ webidl-conversions@^4.0.2:
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
   integrity sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==
 
-webidl-conversions@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-7.0.0.tgz#256b4e1882be7debbf01d05f0aa2039778ea080a"
-  integrity sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==
+webidl-conversions@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-5.0.0.tgz#ae59c8a00b121543a2acc65c0434f57b0fc11aff"
+  integrity sha512-VlZwKPCkYKxQgeSbH5EyngOmRp7Ww7I9rQLERETtf5ofd9pGeswWiOtogpEO850jziPRarreGxn5QIiTqpb2wA==
+
+webidl-conversions@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-6.1.0.tgz#9111b4d7ea80acd40f5270d666621afa78b69514"
+  integrity sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w==
 
 webpack-bundle-analyzer@4.10.1:
   version "4.10.1"
@@ -22389,10 +24300,17 @@ websocket@^1.0.8, websocket@~1.0.22:
     utf-8-validate "^5.0.2"
     yaeti "^0.0.6"
 
-whatwg-mimetype@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz#5fa1a7623867ff1af6ca3dc72ad6b8a4208beba7"
-  integrity sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==
+whatwg-encoding@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz#5abacf777c32166a51d085d6b4f3e7d27113ddb0"
+  integrity sha512-b5lim54JOPN9HtzvK9HFXvBma/rnfFeqsic0hSpjtDbVxR3dJKLc+KB4V6GgiGOvl7CY/KNh8rxSo9DKQrnUEw==
+  dependencies:
+    iconv-lite "0.4.24"
+
+whatwg-mimetype@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz#3d4b1e0312d2079879f826aff18dbeeca5960fbf"
+  integrity sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g==
 
 whatwg-url@^5.0.0:
   version "5.0.0"
@@ -22402,6 +24320,24 @@ whatwg-url@^5.0.0:
     tr46 "~0.0.3"
     webidl-conversions "^3.0.0"
 
+whatwg-url@^7.0.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-7.1.0.tgz#c2c492f1eca612988efd3d2266be1b9fc6170d06"
+  integrity sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==
+  dependencies:
+    lodash.sortby "^4.7.0"
+    tr46 "^1.0.1"
+    webidl-conversions "^4.0.2"
+
+whatwg-url@^8.0.0, whatwg-url@^8.5.0:
+  version "8.7.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-8.7.0.tgz#656a78e510ff8f3937bc0bcbe9f5c0ac35941b77"
+  integrity sha512-gAojqb/m9Q8a5IV96E3fHJM70AzCkgt4uXYX2O7EmuyOnLrViCQlsEBmF9UQIu3/aeAIp2U17rtbpZWNntQqdg==
+  dependencies:
+    lodash "^4.7.0"
+    tr46 "^2.1.0"
+    webidl-conversions "^6.1.0"
+
 which-boxed-primitive@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz#13757bc89b209b049fe5d86430e21cf40a89a8e6"
@@ -22472,20 +24408,13 @@ which@^1.2.9, which@^1.3.1:
   dependencies:
     isexe "^2.0.0"
 
-which@^2.0.1:
+which@^2.0.1, which@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
   integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
   dependencies:
     isexe "^2.0.0"
 
-which@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/which/-/which-4.0.0.tgz#cd60b5e74503a3fbcfbf6cd6b4138a8bae644c1a"
-  integrity sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg==
-  dependencies:
-    isexe "^3.1.1"
-
 why-is-node-running@^2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/why-is-node-running/-/why-is-node-running-2.2.2.tgz#4185b2b4699117819e7154594271e7e344c9973e"
@@ -22494,6 +24423,11 @@ why-is-node-running@^2.2.2:
     siginfo "^2.0.0"
     stackback "0.0.2"
 
+wicked-good-xpath@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/wicked-good-xpath/-/wicked-good-xpath-1.3.0.tgz#81b0e95e8650e49c94b22298fff8686b5553cf6c"
+  integrity sha512-Gd9+TUn5nXdwj/hFsPVx5cuHHiF5Bwuc30jZ4+ronF1qHK5O7HD0sgmXWSEgwKquT3ClLoKPVbO6qGwVwLzvAw==
+
 wide-align@^1.1.0:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.5.tgz#df1d4c206854369ecf3c9a4898f1b23fbd9d15d3"
@@ -22513,6 +24447,15 @@ wildcard@^2.0.0:
   resolved "https://registry.yarnpkg.com/wildcard/-/wildcard-2.0.1.tgz#5ab10d02487198954836b6349f74fff961e10f67"
   integrity sha512-CC1bOL87PIWSBhDcTrdeLo6eGT7mCFtrg0uIJtqJUFyK+eJnzl8A1niH56uu7KMa5XFrtiV+AQuHO3n7DsHnLQ==
 
+with-open-file@^0.1.6:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/with-open-file/-/with-open-file-0.1.7.tgz#e2de8d974e8a8ae6e58886be4fe8e7465b58a729"
+  integrity sha512-ecJS2/oHtESJ1t3ZfMI3B7KIDKyfN0O16miWxdn30zdh66Yd3LsRFebXZXq6GU4xfxLf6nVxp9kIqElb5fqczA==
+  dependencies:
+    p-finally "^1.0.0"
+    p-try "^2.1.0"
+    pify "^4.0.1"
+
 word-wrap@^1.2.5:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.5.tgz#d2c45c6dd4fbce621a66f136cbe328afd0410b34"
@@ -22528,19 +24471,27 @@ workerpool@^6.5.1:
   resolved "https://registry.yarnpkg.com/workerpool/-/workerpool-6.5.1.tgz#060f73b39d0caf97c6db64da004cd01b4c099544"
   integrity sha512-Fs4dNYcsdpYSAfVxhnl1L5zTksjvOJxtC5hzMNl+1t9B8hTJTdKDyZ5ju7ztgPy+ft9tBFXoOlDNiOT9WUXZlA==
 
-wrap-ansi@^6.2.0:
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz#e9393ba07102e6c91a3b221478f0257cd2856e53"
-  integrity sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
   dependencies:
     ansi-styles "^4.0.0"
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+wrap-ansi@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-2.1.0.tgz#d8fc3d284dd05794fe84973caecdd1cf824fdd85"
+  integrity sha512-vAaEaDM946gbNpH5pLVNR+vX2ht6n0Bt3GXwVB1AuAqZosOvHNF3P7wDnh8KLkSqgUh0uh77le7Owgoz+Z9XBw==
+  dependencies:
+    string-width "^1.0.1"
+    strip-ansi "^3.0.1"
+
+wrap-ansi@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz#e9393ba07102e6c91a3b221478f0257cd2856e53"
+  integrity sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==
   dependencies:
     ansi-styles "^4.0.0"
     string-width "^4.1.0"
@@ -22569,7 +24520,7 @@ write-file-atomic@^2.3.0:
     imurmurhash "^0.1.4"
     signal-exit "^3.0.2"
 
-write-file-atomic@^3.0.3:
+write-file-atomic@^3.0.0, write-file-atomic@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-3.0.3.tgz#56bd5c5a5c70481cd19c571bd39ab965a5de56e8"
   integrity sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==
@@ -22593,7 +24544,7 @@ ws@8.17.0:
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.17.0.tgz#d145d18eca2ed25aaf791a183903f7be5e295fea"
   integrity sha512-uJq6108EgZMAl20KagGkzCKfMEjxmKvZHG7Tlq0Z6nOky7YF7aq4mOx6xK8TJ/i1LeK4Qus7INktacctDgY8Ow==
 
-ws@^7.3.1:
+ws@^7.3.1, ws@^7.4.6:
   version "7.5.10"
   resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.10.tgz#58b5c20dc281633f6c19113f39b349bd8bd558d9"
   integrity sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==
@@ -22622,11 +24573,26 @@ xml-js@^1.6.11:
   dependencies:
     sax "^1.2.4"
 
+xml-name-validator@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a"
+  integrity sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==
+
 xml@=1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/xml/-/xml-1.0.1.tgz#78ba72020029c5bc87b8a81a3cfcd74b4a2fc1e5"
   integrity sha512-huCv9IH9Tcf95zuYCsQraZtWnJvBtLVE0QHMOs8bWyZAFZNDcYjsPq1nEx8jKA9y+Beo9v+7OBPRisQTjinQMw==
 
+xmlchars@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
+  integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
+
+xmldom-sre@0.1.31:
+  version "0.1.31"
+  resolved "https://registry.yarnpkg.com/xmldom-sre/-/xmldom-sre-0.1.31.tgz#10860d5bab2c603144597d04bf2c4980e98067f4"
+  integrity sha512-f9s+fUkX04BxQf+7mMWAp5zk61pciie+fFLC9hX9UVvCeJQfNHRHXpeo5MPcR0EUf57PYLdt+ZO4f3Ipk2oZUw==
+
 xtend@^4.0.0, xtend@~4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
@@ -22662,26 +24628,26 @@ yallist@^4.0.0:
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
   integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
 
+yaml-ast-parser@0.0.43:
+  version "0.0.43"
+  resolved "https://registry.yarnpkg.com/yaml-ast-parser/-/yaml-ast-parser-0.0.43.tgz#e8a23e6fb4c38076ab92995c5dca33f3d3d7c9bb"
+  integrity sha512-2PTINUwsRqSd+s8XxKaJWQlUuEMHJQyEuh2edBbW8KNJz0SJPwUSD2zRWqezFEdN7IzAgeuYHFUCF7o8zRdZ0A==
+
 yaml@2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.3.1.tgz#02fe0975d23cd441242aa7204e09fc28ac2ac33b"
   integrity sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ==
 
-yaml@^1.10.2, yaml@^1.7.2:
+yaml@^1.10.0, yaml@^1.10.2, yaml@^1.7.2:
   version "1.10.2"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
 
-yaml@^2.2.2:
+yaml@^2.2.2, yaml@^2.3.4:
   version "2.4.5"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.4.5.tgz#60630b206dd6d84df97003d33fc1ddf6296cca5e"
   integrity sha512-aBx2bnqDzVOyNKfsysjA2ms5ZlnjSAW2eG3/L5G/CSujfjLJTJsEw1bGw8kCf04KodQWk1pxlGnZ56CRxiawmg==
 
-yaml@^2.4.2:
-  version "2.5.1"
-  resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.5.1.tgz#c9772aacf62cb7494a95b0c4f1fb065b563db130"
-  integrity sha512-bLQOjaX/ADgQ20isPJRvF0iRUHIxVhYvr53Of7wGcWlO2jvtUlH5m87DsmulFVxRpNLOnI4tB6p/oh8D7kpn9Q==
-
 yargs-parser@^18.1.2, yargs-parser@^18.1.3:
   version "18.1.3"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-18.1.3.tgz#be68c4975c6b2abf469236b0c870362fab09a7b0"
@@ -22710,7 +24676,7 @@ yargs-unparser@^2.0.0:
     flat "^5.0.2"
     is-plain-obj "^2.1.0"
 
-yargs@^15.1.0:
+yargs@^15.1.0, yargs@^15.4.1:
   version "15.4.1"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-15.4.1.tgz#0d87a16de01aee9d8bec2bfbf74f67851730f4f8"
   integrity sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==
@@ -22740,7 +24706,7 @@ yargs@^16.2.0:
     y18n "^5.0.5"
     yargs-parser "^20.2.2"
 
-yargs@^17.0.0, yargs@^17.6.2, yargs@^17.7.1, yargs@^17.7.2:
+yargs@^17.0.1, yargs@^17.6.2, yargs@^17.7.1, yargs@^17.7.2:
   version "17.7.2"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.7.2.tgz#991df39aca675a192b816e1e0363f9d75d2aa269"
   integrity sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==
@@ -22761,6 +24727,146 @@ yauzl@^2.10.0:
     buffer-crc32 "~0.2.3"
     fd-slicer "~1.1.0"
 
+yeoman-assert@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/yeoman-assert/-/yeoman-assert-3.1.1.tgz#9f6fa0ecba7dd007c40f579668cb5dda18c79343"
+  integrity sha512-bCuLb/j/WzpvrJZCTdJJLFzm7KK8IYQJ3+dF9dYtNs2CUYyezFJDuULiZ2neM4eqjf45GN1KH/MzCTT3i90wUQ==
+
+yeoman-environment@^2.0.5, yeoman-environment@^2.3.0, yeoman-environment@^2.9.5:
+  version "2.10.3"
+  resolved "https://registry.yarnpkg.com/yeoman-environment/-/yeoman-environment-2.10.3.tgz#9d8f42b77317414434cc0e51fb006a4bdd54688e"
+  integrity sha512-pLIhhU9z/G+kjOXmJ2bPFm3nejfbH+f1fjYRSOteEXDBrv1EoJE/e+kuHixSXfCYfTkxjYsvRaDX+1QykLCnpQ==
+  dependencies:
+    chalk "^2.4.1"
+    debug "^3.1.0"
+    diff "^3.5.0"
+    escape-string-regexp "^1.0.2"
+    execa "^4.0.0"
+    globby "^8.0.1"
+    grouped-queue "^1.1.0"
+    inquirer "^7.1.0"
+    is-scoped "^1.0.0"
+    lodash "^4.17.10"
+    log-symbols "^2.2.0"
+    mem-fs "^1.1.0"
+    mem-fs-editor "^6.0.0"
+    npm-api "^1.0.0"
+    semver "^7.1.3"
+    strip-ansi "^4.0.0"
+    text-table "^0.2.0"
+    untildify "^3.0.3"
+    yeoman-generator "^4.8.2"
+
+yeoman-generator@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/yeoman-generator/-/yeoman-generator-2.0.5.tgz#57b0b3474701293cc9ec965288f3400b00887c81"
+  integrity sha512-rV6tJ8oYzm4mmdF2T3wjY+Q42jKF2YiiD0VKfJ8/0ZYwmhCKC9Xs2346HVLPj/xE13i68psnFJv7iS6gWRkeAg==
+  dependencies:
+    async "^2.6.0"
+    chalk "^2.3.0"
+    cli-table "^0.3.1"
+    cross-spawn "^6.0.5"
+    dargs "^5.1.0"
+    dateformat "^3.0.3"
+    debug "^3.1.0"
+    detect-conflict "^1.0.0"
+    error "^7.0.2"
+    find-up "^2.1.0"
+    github-username "^4.0.0"
+    istextorbinary "^2.2.1"
+    lodash "^4.17.10"
+    make-dir "^1.1.0"
+    mem-fs-editor "^4.0.0"
+    minimist "^1.2.0"
+    pretty-bytes "^4.0.2"
+    read-chunk "^2.1.0"
+    read-pkg-up "^3.0.0"
+    rimraf "^2.6.2"
+    run-async "^2.0.0"
+    shelljs "^0.8.0"
+    text-table "^0.2.0"
+    through2 "^2.0.0"
+    yeoman-environment "^2.0.5"
+
+yeoman-generator@^3.1.1:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/yeoman-generator/-/yeoman-generator-3.2.0.tgz#02077d2d7ff28fedc1ed7dad7f9967fd7c3604cc"
+  integrity sha512-iR/qb2je3GdXtSfxgvOXxUW0Cp8+C6LaZaNlK2BAICzFNzwHtM10t/QBwz5Ea9nk6xVDQNj4Q889TjCXGuIv8w==
+  dependencies:
+    async "^2.6.0"
+    chalk "^2.3.0"
+    cli-table "^0.3.1"
+    cross-spawn "^6.0.5"
+    dargs "^6.0.0"
+    dateformat "^3.0.3"
+    debug "^4.1.0"
+    detect-conflict "^1.0.0"
+    error "^7.0.2"
+    find-up "^3.0.0"
+    github-username "^4.0.0"
+    istextorbinary "^2.2.1"
+    lodash "^4.17.10"
+    make-dir "^1.1.0"
+    mem-fs-editor "^5.0.0"
+    minimist "^1.2.0"
+    pretty-bytes "^5.1.0"
+    read-chunk "^3.0.0"
+    read-pkg-up "^4.0.0"
+    rimraf "^2.6.2"
+    run-async "^2.0.0"
+    shelljs "^0.8.0"
+    text-table "^0.2.0"
+    through2 "^3.0.0"
+    yeoman-environment "^2.0.5"
+
+yeoman-generator@^4.8.2:
+  version "4.13.0"
+  resolved "https://registry.yarnpkg.com/yeoman-generator/-/yeoman-generator-4.13.0.tgz#a6caeed8491fceea1f84f53e31795f25888b4672"
+  integrity sha512-f2/5N5IR3M2Ozm+QocvZQudlQITv2DwI6Mcxfy7R7gTTzaKgvUpgo/pQMJ+WQKm0KN0YMWCFOZpj0xFGxevc1w==
+  dependencies:
+    async "^2.6.2"
+    chalk "^2.4.2"
+    cli-table "^0.3.1"
+    cross-spawn "^6.0.5"
+    dargs "^6.1.0"
+    dateformat "^3.0.3"
+    debug "^4.1.1"
+    diff "^4.0.1"
+    error "^7.0.2"
+    find-up "^3.0.0"
+    github-username "^3.0.0"
+    istextorbinary "^2.5.1"
+    lodash "^4.17.11"
+    make-dir "^3.0.0"
+    mem-fs-editor "^7.0.1"
+    minimist "^1.2.5"
+    pretty-bytes "^5.2.0"
+    read-chunk "^3.2.0"
+    read-pkg-up "^5.0.0"
+    rimraf "^2.6.3"
+    run-async "^2.0.0"
+    semver "^7.2.1"
+    shelljs "^0.8.4"
+    text-table "^0.2.0"
+    through2 "^3.0.1"
+  optionalDependencies:
+    grouped-queue "^1.1.0"
+    yeoman-environment "^2.9.5"
+
+yeoman-test@^1.7.0:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/yeoman-test/-/yeoman-test-1.9.1.tgz#7b6608f663714e76a4dbf0c387983cbc8b7619cb"
+  integrity sha512-aWB8CglmjBfXd+U5g5Cm1b8KVW0uotjo521IgkepvhNXiAX/YswHYGVnbEFb0m9ZdXztELuNJn2UtuwgFZIw6Q==
+  dependencies:
+    inquirer "^5.2.0"
+    lodash "^4.17.10"
+    mkdirp "^0.5.1"
+    pinkie-promise "^2.0.1"
+    rimraf "^2.4.4"
+    sinon "^5.0.7"
+    yeoman-environment "^2.3.0"
+    yeoman-generator "^2.0.5"
+
 yn@3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/yn/-/yn-3.1.1.tgz#1e87401a09d767c1d5eab26a6e4c185182d2eb50"
@@ -22776,6 +24882,21 @@ yocto-queue@^1.0.0:
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-1.0.0.tgz#7f816433fb2cbc511ec8bf7d263c3b58a1a3c251"
   integrity sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==
 
+yosay@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/yosay/-/yosay-2.0.2.tgz#a7017e764cd88d64a1ae64812201de5b157adf6d"
+  integrity sha512-avX6nz2esp7IMXGag4gu6OyQBsMh/SEn+ZybGu3yKPlOTE6z9qJrzG/0X5vCq/e0rPFy0CUYCze0G5hL310ibA==
+  dependencies:
+    ansi-regex "^2.0.0"
+    ansi-styles "^3.0.0"
+    chalk "^1.0.0"
+    cli-boxes "^1.0.0"
+    pad-component "0.0.1"
+    string-width "^2.0.0"
+    strip-ansi "^3.0.0"
+    taketalk "^1.0.0"
+    wrap-ansi "^2.0.0"
+
 z-schema-esm@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/z-schema-esm/-/z-schema-esm-6.0.1.tgz#09b90f77e2cae8bd99db0e1e32d00b59a5d5d581"

From 4eb796ec8a0bcbc60abef1591138331155285763 Mon Sep 17 00:00:00 2001
From: SorsOps <80043879+sorsOps@users.noreply.github.com>
Date: Wed, 7 Aug 2024 10:54:09 +0200
Subject: [PATCH 06/10] Format

---
 .../contextMenus/nodeContextMenu.tsx          |   8 +-
 .../contextMenus/paneContextMenu.tsx          |   2 +-
 .../contextMenus/selectionContextMenu.tsx     |  10 +-
 .../src/components/flow/wrapper/nodeV2.tsx    |   8 +-
 .../src/components/hotKeys/index.tsx          |   1 -
 .../src/components/panels/shortcuts/index.tsx | 112 ++++++-----
 .../src/components/portPanel/index.tsx        |   5 +-
 packages/graph-editor/src/context/graph.tsx   |   2 +-
 .../src/editor/actions/connect.ts             | 176 +++++++++---------
 .../src/editor/actions/copyNodes.tsx          |   2 +-
 .../src/editor/actions/duplicate.ts           | 161 ++++++++--------
 packages/graph-editor/src/editor/graph.tsx    |  44 +++--
 .../src/editor/layoutController.tsx           |   5 +-
 .../src/hooks/useIsValidConnection.ts         |  11 +-
 .../graph-editor/src/redux/models/graph.ts    |   2 +-
 .../graph-editor/src/registry/control.tsx     |   3 +-
 .../graph-editor/src/registry/specifics.tsx   |   2 +-
 packages/graph-editor/src/types/index.ts      |  12 +-
 packages/graph-editor/vite.config.ts          |   4 +-
 .../graph-engine/src/capabilities/dataflow.ts |   3 +-
 20 files changed, 300 insertions(+), 273 deletions(-)

diff --git a/packages/graph-editor/src/components/contextMenus/nodeContextMenu.tsx b/packages/graph-editor/src/components/contextMenus/nodeContextMenu.tsx
index 62dac1abf..b3ca0b9ee 100644
--- a/packages/graph-editor/src/components/contextMenus/nodeContextMenu.tsx
+++ b/packages/graph-editor/src/components/contextMenus/nodeContextMenu.tsx
@@ -169,8 +169,12 @@ export const NodeContextMenu = ({ id, nodes }: INodeContextMenuProps) => {
       <Separator />
       {nodes?.length == 1 && (
         <>
-          <ContextMenuItem onClick={onTraceSource}>Trace Upstream</ContextMenuItem>
-          <ContextMenuItem onClick={onTraceTarget}>Trace Downstream</ContextMenuItem>
+          <ContextMenuItem onClick={onTraceSource}>
+            Trace Upstream
+          </ContextMenuItem>
+          <ContextMenuItem onClick={onTraceTarget}>
+            Trace Downstream
+          </ContextMenuItem>
         </>
       )}
       <ContextMenuItem onClick={onResetTrace}>Reset Trace</ContextMenuItem>
diff --git a/packages/graph-editor/src/components/contextMenus/paneContextMenu.tsx b/packages/graph-editor/src/components/contextMenus/paneContextMenu.tsx
index 4cb1b63ec..f828b14f5 100644
--- a/packages/graph-editor/src/components/contextMenus/paneContextMenu.tsx
+++ b/packages/graph-editor/src/components/contextMenus/paneContextMenu.tsx
@@ -14,7 +14,7 @@ export interface IPaneContextMenu<T = unknown> {
   onSelectItem: (item: T) => void;
 }
 
-export const PaneContextMenu = <T = unknown>({ id }: IPaneContextMenu<T>) => {
+export const PaneContextMenu = <T = unknown,>({ id }: IPaneContextMenu<T>) => {
   const reactFlowInstance = useReactFlow();
 
   const frame = useFrame();
diff --git a/packages/graph-editor/src/components/contextMenus/selectionContextMenu.tsx b/packages/graph-editor/src/components/contextMenus/selectionContextMenu.tsx
index e8993f6ae..bd50fa562 100644
--- a/packages/graph-editor/src/components/contextMenus/selectionContextMenu.tsx
+++ b/packages/graph-editor/src/components/contextMenus/selectionContextMenu.tsx
@@ -1,4 +1,10 @@
-import { DataflowNode, Edge, Graph, Input, Output } from '@tokens-studio/graph-engine';
+import {
+  DataflowNode,
+  Edge,
+  Graph,
+  Input,
+  Output,
+} from '@tokens-studio/graph-engine';
 import { Item, Menu, Separator } from 'react-contexify';
 import { Node, getRectOfNodes, useReactFlow, useStoreApi } from 'reactflow';
 import { NodeTypes } from '../flow/types.js';
@@ -6,7 +12,7 @@ import { deletable } from '@/annotations/index.js';
 import { getId } from '../flow/utils.js';
 import { useAction } from '@/editor/actions/provider.js';
 import { useLocalGraph } from '@/hooks/index.js';
-import { nanoid as uuid } from 'nanoid'
+import { nanoid as uuid } from 'nanoid';
 import React, { useCallback } from 'react';
 
 export type INodeContextMenuProps = {
diff --git a/packages/graph-editor/src/components/flow/wrapper/nodeV2.tsx b/packages/graph-editor/src/components/flow/wrapper/nodeV2.tsx
index 84fc6b9e1..a41e4768b 100644
--- a/packages/graph-editor/src/components/flow/wrapper/nodeV2.tsx
+++ b/packages/graph-editor/src/components/flow/wrapper/nodeV2.tsx
@@ -357,7 +357,11 @@ const InputHandle = observer(
     const type = extractType(port.type);
     const handleInformation = useHandle();
 
-    const variant = typeCol.isArray ? 'array' : (port.pType == CONTROL_PORT?'message':undefined);
+    const variant = typeCol.isArray
+      ? 'array'
+      : port.pType == CONTROL_PORT
+        ? 'message'
+        : undefined;
 
     if (input.variadic) {
       return (
@@ -378,7 +382,7 @@ const InputHandle = observer(
               <Handle
                 {...typeCol}
                 //The underlying type might not be an array
-                variant={port.type.type?.type === 'array'?'array':undefined}
+                variant={port.type.type?.type === 'array' ? 'array' : undefined}
                 visible={port.visible != false || port.isConnected}
                 id={port.name + `[${edge.annotations['engine.index']}]`}
                 key={i}
diff --git a/packages/graph-editor/src/components/hotKeys/index.tsx b/packages/graph-editor/src/components/hotKeys/index.tsx
index e924e1f8c..c3e8c7172 100644
--- a/packages/graph-editor/src/components/hotKeys/index.tsx
+++ b/packages/graph-editor/src/components/hotKeys/index.tsx
@@ -100,7 +100,6 @@ export const keyMapDescriptions = {
   RECALL_VIEWPORT: 'Recall Viewport',
 };
 
-
 export const getViewports = (graph) => {
   const viewports =
     graph.annotations[savedViewports] || new Array(9).fill(null);
diff --git a/packages/graph-editor/src/components/panels/shortcuts/index.tsx b/packages/graph-editor/src/components/panels/shortcuts/index.tsx
index 8e34ba73a..54f84127e 100644
--- a/packages/graph-editor/src/components/panels/shortcuts/index.tsx
+++ b/packages/graph-editor/src/components/panels/shortcuts/index.tsx
@@ -1,66 +1,62 @@
 import { Box, Heading, Stack, Text } from '@tokens-studio/ui';
-import { keyMap, keyMapDescriptions } from '../../hotKeys/index.js'
+import { keyMap, keyMapDescriptions } from '../../hotKeys/index.js';
 import { styled } from '@/lib/stitches/index.js';
 import { useMemo } from 'react';
-import React from 'react'
-
+import React from 'react';
 
 const Code = styled('code', {
-    color: '$fgSubtle',
-    padding: '$1',
-    border: '1px solid $borderSubtle',
+  color: '$fgSubtle',
+  padding: '$1',
+  border: '1px solid $borderSubtle',
 });
 
 export const ShortcutsPanel = () => {
-
-    const entries = useMemo(() => {
-        return Object.entries(keyMap).map(([id, triggers]) => {
-
-            //Get the description
-            const description = keyMapDescriptions[id];
-            //Get the first trigger
-            const trigger = Array.isArray(triggers) ? triggers[0] : triggers;
-
-            //Now split the trigger
-            const pieces = trigger.split('+');
-
-            return (
-                <Stack gap={2}>
-                    <Stack css={{ flex: 1 }} gap={1} justify='end'>
-                        {/* Place a + between the values */}
-                        {pieces.map((piece, index) => (
-                            <React.Fragment key={index}>
-                                {index > 0 && <Text> + </Text>}
-                                <Code>{piece}</Code>
-                            </React.Fragment>
-                        ))}
-                    </Stack>
-                    <Text css={{ flex: 1 }} >{description}</Text>
-                </Stack>
-            );
-        });
-    }, []);
-
-
-    return (
-        <Box
-            css={{
-                height: '100%',
-                width: '100%',
-                padding: '$4',
-                paddingTop: '$5',
-                boxSizing: 'border-box',
-                flex: 1,
-                display: 'flex',
-                overflow: 'auto',
-                flexDirection: 'column',
-            }}
-        >
-            <Heading size='large'>Keyboard Shortcuts</Heading>
-            <br />
-            <Stack direction="column" gap={4} width="full">
-                {entries}
-            </Stack>
-        </Box>
-    );
-}
\ No newline at end of file
+  const entries = useMemo(() => {
+    return Object.entries(keyMap).map(([id, triggers]) => {
+      //Get the description
+      const description = keyMapDescriptions[id];
+      //Get the first trigger
+      const trigger = Array.isArray(triggers) ? triggers[0] : triggers;
+
+      //Now split the trigger
+      const pieces = trigger.split('+');
+
+      return (
+        <Stack gap={2}>
+          <Stack css={{ flex: 1 }} gap={1} justify="end">
+            {/* Place a + between the values */}
+            {pieces.map((piece, index) => (
+              <React.Fragment key={index}>
+                {index > 0 && <Text> + </Text>}
+                <Code>{piece}</Code>
+              </React.Fragment>
+            ))}
+          </Stack>
+          <Text css={{ flex: 1 }}>{description}</Text>
+        </Stack>
+      );
+    });
+  }, []);
+
+  return (
+    <Box
+      css={{
+        height: '100%',
+        width: '100%',
+        padding: '$4',
+        paddingTop: '$5',
+        boxSizing: 'border-box',
+        flex: 1,
+        display: 'flex',
+        overflow: 'auto',
+        flexDirection: 'column',
+      }}
+    >
+      <Heading size="large">Keyboard Shortcuts</Heading>
+      <br />
+      <Stack direction="column" gap={4} width="full">
+        {entries}
+      </Stack>
+    </Box>
+  );
+};
diff --git a/packages/graph-editor/src/components/portPanel/index.tsx b/packages/graph-editor/src/components/portPanel/index.tsx
index ed97e819e..c04de2b30 100644
--- a/packages/graph-editor/src/components/portPanel/index.tsx
+++ b/packages/graph-editor/src/components/portPanel/index.tsx
@@ -57,9 +57,8 @@ export const Port = observer(({ port, readOnly: isReadOnly }: IPort) => {
   const resettable = Boolean(port.annotations[resetable]);
 
   const inner = useMemo(() => {
-
     if (port.pType !== DATAFLOW_PORT) {
-      return <></>
+      return <></>;
     }
 
     const field = controlSelector.find((x) => x.matcher(port, { readOnly }));
@@ -112,7 +111,7 @@ export const Port = observer(({ port, readOnly: isReadOnly }: IPort) => {
   }, [dataflowPort.value]);
 
   return (
-    <Stack direction="column" gap={3} >
+    <Stack direction="column" gap={3}>
       <Stack direction="row" gap={2} align="center" justify="between">
         <Stack direction="row" gap={2} align="center">
           {!isInput && (
diff --git a/packages/graph-editor/src/context/graph.tsx b/packages/graph-editor/src/context/graph.tsx
index 323223ec1..a4ffb315f 100644
--- a/packages/graph-editor/src/context/graph.tsx
+++ b/packages/graph-editor/src/context/graph.tsx
@@ -14,7 +14,7 @@ function GraphContextProvider({
   graph,
   children,
 }: {
-    graph: FullyFeaturedGraph;
+  graph: FullyFeaturedGraph;
   children: React.ReactNode;
 }) {
   const providerValue = useMemo(() => ({ graph }), [graph]);
diff --git a/packages/graph-editor/src/editor/actions/connect.ts b/packages/graph-editor/src/editor/actions/connect.ts
index bbce98365..535ea0487 100644
--- a/packages/graph-editor/src/editor/actions/connect.ts
+++ b/packages/graph-editor/src/editor/actions/connect.ts
@@ -14,108 +14,108 @@ export const connectNodes =
     setEdges: React.Dispatch<React.SetStateAction<Edge[]>>;
     dispatch: Dispatch;
   }) =>
-    (params: Connection) => {
-      //Create the connection in the underlying graph
+  (params: Connection) => {
+    //Create the connection in the underlying graph
 
-      let parameters = params;
-      const sourceNode = graph.getNode(params.source!);
-      const targetNode = graph.getNode(params.target!);
+    let parameters = params;
+    const sourceNode = graph.getNode(params.source!);
+    const targetNode = graph.getNode(params.target!);
 
-      const variadicIndex = getVariadicIndex(params.targetHandle!);
+    const variadicIndex = getVariadicIndex(params.targetHandle!);
 
-      if (!sourceNode || !targetNode) {
-        throw new Error('Could not find node');
-      }
-
-      const strippedTargetHandle = stripVariadic(params.targetHandle!);
-      let sourcePort = sourceNode.outputs[stripVariadic(params.sourceHandle!)];
-      const targetPort = targetNode.inputs[strippedTargetHandle];
+    if (!sourceNode || !targetNode) {
+      throw new Error('Could not find node');
+    }
 
-      if (params.sourceHandle === '[dynamic]') {
-        let candidateName = strippedTargetHandle;
-        let counter = 0;
+    const strippedTargetHandle = stripVariadic(params.targetHandle!);
+    let sourcePort = sourceNode.outputs[stripVariadic(params.sourceHandle!)];
+    const targetPort = targetNode.inputs[strippedTargetHandle];
 
-        while (sourceNode.inputs[candidateName]) {
-          candidateName = strippedTargetHandle + counter++;
-        }
+    if (params.sourceHandle === '[dynamic]') {
+      let candidateName = strippedTargetHandle;
+      let counter = 0;
 
-        //The user is trying to create a dynamic input
-        sourceNode.addInput(candidateName, {
-          type: targetPort.type,
-          visible: false,
-          annotations: {
-            [deletable]: true,
-          },
-        });
-        sourceNode.inputs[candidateName].setValue(targetPort.value);
-        //Change the handle to the newly created handle
-        sourcePort = sourceNode.outputs[candidateName];
-        params.sourceHandle = candidateName;
+      while (sourceNode.inputs[candidateName]) {
+        candidateName = strippedTargetHandle + counter++;
       }
 
-      //If the source port is variadic, check to see if there is already a connection
-      else if (targetPort.variadic) {
-        const alreadyConnected = targetPort._edges.some((edge) => {
-          const index = edge.annotations['engine.index'] as number;
-          return index === variadicIndex;
-        });
-        //Don't attempt to overwrite an existing index
-        if (alreadyConnected) {
-          return;
-        }
-      }
-      //Check to see if there is already a connection
-      else if (targetPort.isConnected) {
-        //We need to disconnect the existing connection
-        graph.removeEdge(targetPort._edges[0].id);
-      }
+      //The user is trying to create a dynamic input
+      sourceNode.addInput(candidateName, {
+        type: targetPort.type,
+        visible: false,
+        annotations: {
+          [deletable]: true,
+        },
+      });
+      sourceNode.inputs[candidateName].setValue(targetPort.value);
+      //Change the handle to the newly created handle
+      sourcePort = sourceNode.outputs[candidateName];
+      params.sourceHandle = candidateName;
+    }
 
-      const newGraphEdge = graph.connect(
-        sourceNode,
-        sourcePort,
-        targetNode,
-        targetPort,
-      );
+    //If the source port is variadic, check to see if there is already a connection
+    else if (targetPort.variadic) {
+      const alreadyConnected = targetPort._edges.some((edge) => {
+        const index = edge.annotations['engine.index'] as number;
+        return index === variadicIndex;
+      });
+      //Don't attempt to overwrite an existing index
+      if (alreadyConnected) {
+        return;
+      }
+    }
+    //Check to see if there is already a connection
+    else if (targetPort.isConnected) {
+      //We need to disconnect the existing connection
+      graph.removeEdge(targetPort._edges[0].id);
+    }
 
-      //If the target port is variadic, we need to add the index to the edge data
-      if (targetPort.variadic) {
-        const index = newGraphEdge.annotations['engine.index'] as number;
+    const newGraphEdge = graph.connect(
+      sourceNode,
+      sourcePort,
+      targetNode,
+      targetPort,
+    );
 
-        parameters = {
-          ...parameters,
-          targetHandle: params.targetHandle + `[${index}]`,
-        };
-      }
+    //If the target port is variadic, we need to add the index to the edge data
+    if (targetPort.variadic) {
+      const index = newGraphEdge.annotations['engine.index'] as number;
 
-      const newEdge = {
+      parameters = {
         ...parameters,
-        id: newGraphEdge.id,
-        type: 'custom',
+        targetHandle: params.targetHandle + `[${index}]`,
       };
+    }
 
-      dispatch.graph.appendLog({
-        time: new Date(),
-        type: 'info',
-        data: {
-          msg: `Edge #${newGraphEdge.id} created`,
-        },
-      });
+    const newEdge = {
+      ...parameters,
+      id: newGraphEdge.id,
+      type: 'custom',
+    };
+
+    dispatch.graph.appendLog({
+      time: new Date(),
+      type: 'info',
+      data: {
+        msg: `Edge #${newGraphEdge.id} created`,
+      },
+    });
 
-      return setEdges((eds) => {
-        const newEdgs = eds.reduce(
-          (acc, edge) => {
-            //All our inputs take a single input only, disconnect if we have a connection already
-            if (
-              edge.targetHandle == params.targetHandle &&
-              edge.target === params.target
-            ) {
-              return acc;
-            }
-            acc.push(edge);
+    return setEdges((eds) => {
+      const newEdgs = eds.reduce(
+        (acc, edge) => {
+          //All our inputs take a single input only, disconnect if we have a connection already
+          if (
+            edge.targetHandle == params.targetHandle &&
+            edge.target === params.target
+          ) {
             return acc;
-          },
-          [newEdge] as Edge[],
-        );
-        return newEdgs;
-      });
-    };
+          }
+          acc.push(edge);
+          return acc;
+        },
+        [newEdge] as Edge[],
+      );
+      return newEdgs;
+    });
+  };
diff --git a/packages/graph-editor/src/editor/actions/copyNodes.tsx b/packages/graph-editor/src/editor/actions/copyNodes.tsx
index 8c0032b1f..482e556af 100644
--- a/packages/graph-editor/src/editor/actions/copyNodes.tsx
+++ b/packages/graph-editor/src/editor/actions/copyNodes.tsx
@@ -1,6 +1,6 @@
 import { Node, ReactFlowInstance } from 'reactflow';
 import { SerializedNode } from '@/types/serializedNode.js';
-import { nanoid as uuid } from 'nanoid'
+import { nanoid as uuid } from 'nanoid';
 
 export const copyNodeAction = (
   reactFlowInstance: ReactFlowInstance,
diff --git a/packages/graph-editor/src/editor/actions/duplicate.ts b/packages/graph-editor/src/editor/actions/duplicate.ts
index 52ebc5672..7766298e2 100644
--- a/packages/graph-editor/src/editor/actions/duplicate.ts
+++ b/packages/graph-editor/src/editor/actions/duplicate.ts
@@ -1,12 +1,11 @@
 import { Edge, Node, ReactFlowInstance } from 'reactflow';
 import { FullyFeaturedGraph } from '@/types/index.js';
 import {
-
   NodeFactory,
   Port,
   annotatedSingleton,
 } from '@tokens-studio/graph-engine';
-import { nanoid as uuid } from 'nanoid'
+import { nanoid as uuid } from 'nanoid';
 import { xpos, ypos } from '@/annotations/index.js';
 
 export interface IDuplicate {
@@ -20,82 +19,82 @@ export interface IDuplicate {
  */
 export const duplicateNodes =
   ({ graph, reactFlowInstance }: IDuplicate) =>
-    (nodeIds: string[]) => {
-      const { addNodes, addEdges } = nodeIds.reduce(
-        (acc, nodeId) => {
-          const node = reactFlowInstance.getNode(nodeId);
-          //Ignore missing lookups
-          if (!node) {
-            return acc;
-          }
-
-          const graphNode = graph.getNode(nodeId);
-
-          //Ignore missing nodes or attempts to duplicate singletons
-          if (!graphNode || graphNode?.annotations[annotatedSingleton]) {
-            return acc;
-          }
-
-          const clonedNode = graphNode.clone(graph);
-
-          const newPosition = {
-            x: node.position.x + 20,
-            y: node.position.y + 100,
-          };
-
-          clonedNode.setAnnotation(xpos, newPosition.x);
-          clonedNode.setAnnotation(ypos, newPosition.y);
-
-          graph.addNode(clonedNode);
-
-          const newEdges = Object.entries(graphNode.inputs)
-            .map(([key, value]) => {
-              // value._edges.
-              return (value as Port)._edges.map((edge) => {
-                const newEdgeId = uuid();
-
-                const vals = {
-                  id: newEdgeId,
-                  target: clonedNode.id,
-                  targetHandle: key,
-                  source: edge.source,
-                  sourceHandle: edge.sourceHandle,
-                };
-
-                graph.createEdge(vals);
-                return vals;
-              });
-            })
-            .flat();
-
-          //De select the existing node so that we can select the new one
-          node.selected = false;
-
-          const newNodes = [
-            {
-              ...node,
-              id: clonedNode.id,
-              selected: true,
-              position: newPosition,
-            },
-          ];
-
-          return {
-            addNodes: acc.addNodes.concat(newNodes),
-            addEdges: acc.addEdges.concat(newEdges),
-          };
-        },
-        {
-          addNodes: [] as Node[],
-          addEdges: [] as Edge[],
-        },
-      );
-
-      //We need to set the nodes and edges otherwise reactflow will not respect the change to the selected value we used
-      reactFlowInstance.setNodes((existingNodes) => {
-        return existingNodes.concat(addNodes);
-      });
-      reactFlowInstance.setEdges((existingEdges) => {
-        return existingEdges.concat(addEdges);
-      });
-    };
+  (nodeIds: string[]) => {
+    const { addNodes, addEdges } = nodeIds.reduce(
+      (acc, nodeId) => {
+        const node = reactFlowInstance.getNode(nodeId);
+        //Ignore missing lookups
+        if (!node) {
+          return acc;
+        }
+
+        const graphNode = graph.getNode(nodeId);
+
+        //Ignore missing nodes or attempts to duplicate singletons
+        if (!graphNode || graphNode?.annotations[annotatedSingleton]) {
+          return acc;
+        }
+
+        const clonedNode = graphNode.clone(graph);
+
+        const newPosition = {
+          x: node.position.x + 20,
+          y: node.position.y + 100,
+        };
+
+        clonedNode.setAnnotation(xpos, newPosition.x);
+        clonedNode.setAnnotation(ypos, newPosition.y);
+
+        graph.addNode(clonedNode);
+
+        const newEdges = Object.entries(graphNode.inputs)
+          .map(([key, value]) => {
+            // value._edges.
+            return (value as Port)._edges.map((edge) => {
+              const newEdgeId = uuid();
+
+              const vals = {
+                id: newEdgeId,
+                target: clonedNode.id,
+                targetHandle: key,
+                source: edge.source,
+                sourceHandle: edge.sourceHandle,
+              };
+
+              graph.createEdge(vals);
+              return vals;
+            });
+          })
+          .flat();
+
+        //De select the existing node so that we can select the new one
+        node.selected = false;
+
+        const newNodes = [
+          {
+            ...node,
+            id: clonedNode.id,
+            selected: true,
+            position: newPosition,
+          },
+        ];
+
+        return {
+          addNodes: acc.addNodes.concat(newNodes),
+          addEdges: acc.addEdges.concat(newEdges),
+        };
+      },
+      {
+        addNodes: [] as Node[],
+        addEdges: [] as Edge[],
+      },
+    );
+
+    //We need to set the nodes and edges otherwise reactflow will not respect the change to the selected value we used
+    reactFlowInstance.setNodes((existingNodes) => {
+      return existingNodes.concat(addNodes);
+    });
+    reactFlowInstance.setEdges((existingEdges) => {
+      return existingEdges.concat(addEdges);
+    });
+  };
diff --git a/packages/graph-editor/src/editor/graph.tsx b/packages/graph-editor/src/editor/graph.tsx
index ba3c7a78d..8998e18b2 100644
--- a/packages/graph-editor/src/editor/graph.tsx
+++ b/packages/graph-editor/src/editor/graph.tsx
@@ -24,7 +24,7 @@ import {
 } from '../components/flow/utils.js';
 import { handleDrop } from './actions/handleDrop.js';
 import { useDispatch } from '../hooks/index.js';
-import { nanoid as uuid } from 'nanoid'
+import { nanoid as uuid } from 'nanoid';
 import CustomEdge from '../components/flow/edges/edge.js';
 import React, {
   MouseEvent,
@@ -42,7 +42,11 @@ import groupNode from '../components/flow/nodes/groupNode.js';
 import noteNode from '../components/flow/nodes/noteNode.js';
 
 import { ActionProvider } from './actions/provider.js';
-import { BatchRunError, DataFlowCapabilityFactory, Graph } from '@tokens-studio/graph-engine';
+import {
+  BatchRunError,
+  DataFlowCapabilityFactory,
+  Graph,
+} from '@tokens-studio/graph-engine';
 import { CommandMenu } from '@/components/commandPalette/index.js';
 import { ControlFlowCapabilityFactory } from '@tokens-studio/graph-engine';
 import { EdgeContextMenu } from '../components/contextMenus/edgeContextMenu.js';
@@ -151,7 +155,6 @@ export const EditorApp = React.forwardRef<
 
   //Attach sideeffect listeners
   useEffect(() => {
-
     graph.onFinalize('serialize', (serialized) => {
       const nodes = reactFlowInstance.getNodes();
 
@@ -323,9 +326,14 @@ export const EditorApp = React.forwardRef<
             break;
           case 'position':
             if ((change as NodePositionChange).position) {
-              node.setAnnotation(xpos, (change as NodePositionChange).position!.x);
-              node.setAnnotation(ypos, (change as NodePositionChange).position!.y);
-
+              node.setAnnotation(
+                xpos,
+                (change as NodePositionChange).position!.x,
+              );
+              node.setAnnotation(
+                ypos,
+                (change as NodePositionChange).position!.y,
+              );
             }
             break;
         }
@@ -464,17 +472,19 @@ export const EditorApp = React.forwardRef<
         });
         //Execute the graph once to propagate values and update the UI
 
-        loadedGraph.capabilities.dataFlow.execute().catch((e: BatchRunError) => {
-          dispatch.graph.appendLog({
-            type: 'error',
-            time: new Date(),
-            data: {
-              node: e.nodeId,
-              error: e.message,
-              msg: `Error executing graph`,
-            },
+        loadedGraph.capabilities.dataFlow
+          .execute()
+          .catch((e: BatchRunError) => {
+            dispatch.graph.appendLog({
+              type: 'error',
+              time: new Date(),
+              data: {
+                node: e.nodeId,
+                error: e.message,
+                msg: `Error executing graph`,
+              },
+            });
           });
-        });
 
         setTheGraph(loadedGraph);
       },
@@ -567,7 +577,7 @@ export const EditorApp = React.forwardRef<
       const PassthroughFactory = await frame.nodeLoader(PASSTHROUGH);
 
       const newNode = new PassthroughFactory({
-        graph:graph as unknown as Graph
+        graph: graph as unknown as Graph,
       });
 
       newNode.annotations[uiNodeType] = PASSTHROUGH;
diff --git a/packages/graph-editor/src/editor/layoutController.tsx b/packages/graph-editor/src/editor/layoutController.tsx
index 906a40d43..ae96ed005 100644
--- a/packages/graph-editor/src/editor/layoutController.tsx
+++ b/packages/graph-editor/src/editor/layoutController.tsx
@@ -277,10 +277,7 @@ export const LayoutController = React.forwardRef<
   ImperativeEditorRef,
   EditorProps
 >((props: EditorProps, ref) => {
-  const {
-    initialLayout,
-    menuItems = defaultMenuDataFactory(),
-  } = props;
+  const { initialLayout, menuItems = defaultMenuDataFactory() } = props;
 
   const system = useSystem();
 
diff --git a/packages/graph-editor/src/hooks/useIsValidConnection.ts b/packages/graph-editor/src/hooks/useIsValidConnection.ts
index 3d44800c4..971bf60c8 100644
--- a/packages/graph-editor/src/hooks/useIsValidConnection.ts
+++ b/packages/graph-editor/src/hooks/useIsValidConnection.ts
@@ -1,4 +1,9 @@
-import { ANY, ControlFlowPort, DataFlowPort, canConvertSchemaTypes } from '@tokens-studio/graph-engine';
+import {
+  ANY,
+  ControlFlowPort,
+  DataFlowPort,
+  canConvertSchemaTypes,
+} from '@tokens-studio/graph-engine';
 import { Connection, useReactFlow } from 'reactflow';
 import { stripVariadic } from '@/utils/stripVariadic.js';
 import { useCallback } from 'react';
@@ -14,7 +19,6 @@ export interface IuseIsValidConnection {
   postProcessor?: (connection: Connection) => boolean;
 }
 
-
 type TypedPort = ControlFlowPort | DataFlowPort;
 
 export const useIsValidConnection = ({
@@ -55,11 +59,10 @@ export const useIsValidConnection = ({
       //Do not allow connections of different port types
       if (srcPort && tgtPort) {
         if (srcPort.pType !== tgtPort.pType) {
-          return false
+          return false;
         }
       }
 
-
       let sourceType = (srcPort as TypedPort).type || null;
 
       if ((target.inputs[strippedVariadic] as TypedPort).type.items) {
diff --git a/packages/graph-editor/src/redux/models/graph.ts b/packages/graph-editor/src/redux/models/graph.ts
index a5b55cf5c..26a30d3ad 100644
--- a/packages/graph-editor/src/redux/models/graph.ts
+++ b/packages/graph-editor/src/redux/models/graph.ts
@@ -2,7 +2,7 @@ import { FullyFeaturedGraph } from '@/types/index.js';
 import { ImperativeEditorRef } from '@/editor/editorTypes.js';
 import { MAIN_GRAPH_ID } from '@/constants.js';
 import { RootModel } from './root.js';
-import {  annotatedPlayState } from '@tokens-studio/graph-engine';
+import { annotatedPlayState } from '@tokens-studio/graph-engine';
 import { createModel } from '@rematch/core';
 import type { PlayState } from '@tokens-studio/graph-engine';
 
diff --git a/packages/graph-editor/src/registry/control.tsx b/packages/graph-editor/src/registry/control.tsx
index ac4f2e951..42919d968 100644
--- a/packages/graph-editor/src/registry/control.tsx
+++ b/packages/graph-editor/src/registry/control.tsx
@@ -37,7 +37,8 @@ export const variadicMatcher = (id) => (port: DataFlowPort) =>
  */
 export const defaultControls = [
   {
-    matcher: (port: DataFlowPort) => port.annotations['ui.control'] === 'slider',
+    matcher: (port: DataFlowPort) =>
+      port.annotations['ui.control'] === 'slider',
     component: SliderField,
   },
   {
diff --git a/packages/graph-editor/src/registry/specifics.tsx b/packages/graph-editor/src/registry/specifics.tsx
index e923c5150..6d5d0e8b2 100644
--- a/packages/graph-editor/src/registry/specifics.tsx
+++ b/packages/graph-editor/src/registry/specifics.tsx
@@ -83,7 +83,7 @@ const ColorScalePreview = observer(({ node }: { node: DataflowNode }) => {
 });
 
 const CurvePreview = observer(({ node }: { node: DataflowNode }) => {
-  return <CurveField port={(node.inputs.value as Input) } readOnly />;
+  return <CurveField port={node.inputs.value as Input} readOnly />;
 });
 
 const MathExpressionPreview = observer(({ node }: { node: DataflowNode }) => {
diff --git a/packages/graph-editor/src/types/index.ts b/packages/graph-editor/src/types/index.ts
index 502d0befd..a53af2b11 100644
--- a/packages/graph-editor/src/types/index.ts
+++ b/packages/graph-editor/src/types/index.ts
@@ -1,4 +1,9 @@
-import { ApplyCapabilities, Graph, WithControlFlow, WithDataFlow } from '@tokens-studio/graph-engine';
+import {
+  ApplyCapabilities,
+  Graph,
+  WithControlFlow,
+  WithDataFlow,
+} from '@tokens-studio/graph-engine';
 import { TokenType } from '../utils/index.js';
 
 export type Token = {
@@ -7,6 +12,9 @@ export type Token = {
   type: TokenType;
 };
 
-export type FullyFeaturedGraph = ApplyCapabilities<Graph, [WithControlFlow, WithDataFlow]>
+export type FullyFeaturedGraph = ApplyCapabilities<
+  Graph,
+  [WithControlFlow, WithDataFlow]
+>;
 
 export * from './controls.js';
diff --git a/packages/graph-editor/vite.config.ts b/packages/graph-editor/vite.config.ts
index 7a417edd7..877447554 100644
--- a/packages/graph-editor/vite.config.ts
+++ b/packages/graph-editor/vite.config.ts
@@ -7,12 +7,12 @@ import tsconfigPaths from 'vite-tsconfig-paths';
 export default defineConfig({
   server: {
     port: 3001,
-    cors:false
+    cors: false,
   },
   mode: 'development',
   root: 'examples/defaults',
   define: {
-    'process.env': {}
+    'process.env': {},
   },
   plugins: [react({ tsDecorators: true }), tsconfigPaths()],
 });
diff --git a/packages/graph-engine/src/capabilities/dataflow.ts b/packages/graph-engine/src/capabilities/dataflow.ts
index a5acb5635..d15272852 100644
--- a/packages/graph-engine/src/capabilities/dataflow.ts
+++ b/packages/graph-engine/src/capabilities/dataflow.ts
@@ -239,8 +239,9 @@ export const DataFlowCapabilityFactory: CapabilityFactory = {
 				if (outputNode) {
 					//Output has a dynamic amount of ports, so emit a single object with each of them
 					output = Object.fromEntries(
-						// eslint-disable-next-line @typescript-eslint/no-unused-vars
+
 						Object.entries(outputNode.inputs)
+							// eslint-disable-next-line @typescript-eslint/no-unused-vars
 							.filter(([_, v]) => v.pType == DATAFLOW_PORT)
 							.map(([key, value]: [string, Output]) => {
 								return [

From 9f8147b6e98dd7c157f126d56551e4b3143d5a50 Mon Sep 17 00:00:00 2001
From: SorsOps <80043879+sorsOps@users.noreply.github.com>
Date: Wed, 7 Aug 2024 11:21:53 +0200
Subject: [PATCH 07/10] Move execute out of the dataflow capability

---
 .../graph-engine/src/capabilities/dataflow.ts | 225 +++++++++---------
 .../nodes/example/metadata.yaml               |   9 +-
 2 files changed, 122 insertions(+), 112 deletions(-)

diff --git a/packages/graph-engine/src/capabilities/dataflow.ts b/packages/graph-engine/src/capabilities/dataflow.ts
index d15272852..b93cc5050 100644
--- a/packages/graph-engine/src/capabilities/dataflow.ts
+++ b/packages/graph-engine/src/capabilities/dataflow.ts
@@ -1,4 +1,4 @@
-import { CapabilityFactory } from './interface.js';
+import { ApplyCapabilities, CapabilityFactory } from './interface.js';
 import { DATAFLOW_PORT } from '@/programmatic/dataflow/base.js';
 import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
 import { Graph, topologicalSort } from '../graph/index.js';
@@ -22,14 +22,7 @@ export interface DataFlowCapability {
 	 * @returns
 	 */
 	propagate(nodeId: string, oneShot?: boolean): Promise<void>;
-	/**
-	 * Executes the graph as a single batch. This will execute all the nodes in the graph and return the output of the output node
-	 * Note that this can have side effects and you should create a new instance of a graph between runs if you want to isolate the execution
-	 * @param opts
-	 * @throws {BatchRunError}
-	 * @returns
-	 */
-	execute(opts?: GraphExecuteOptions): Promise<BatchExecution>;
+
 }
 
 export type InputDefinition = {
@@ -107,7 +100,6 @@ export const DataFlowCapabilityFactory: CapabilityFactory = {
 
 				await ctx.propagate(node.id);
 			},
-
 			async propagate(nodeId: string, oneShot: boolean = false) {
 				const node = graph.getNode(nodeId);
 				if (!node) {
@@ -165,105 +157,6 @@ export const DataFlowCapabilityFactory: CapabilityFactory = {
 					await Promise.all(nodes.map(x => ctx.update(x)));
 				}
 			},
-
-			async execute(opts?: GraphExecuteOptions): Promise<BatchExecution> {
-				const { inputs, stats } = opts || {};
-
-				const start = performance.now();
-				const statsTracker = {};
-
-				if (inputs) {
-					const input = Object.values(graph.nodes).find(
-						x => x.factory.type === 'studio.tokens.generic.input'
-					);
-					if (!input) {
-						throw new Error('No input node found');
-					}
-
-					//Set the inputs for execution
-					Object.entries(inputs).forEach(([key, value]) => {
-						const opts: ISetValue = {
-							//We are controlling propagation
-							noPropagate: true
-						};
-						//Only necessary if there is dynamic typing involved
-						if (value.type) {
-							opts.type = value.type;
-						}
-						const port = input.inputs[key] as Input;
-
-						if (port && port.pType == DATAFLOW_PORT) {
-							port.setValue(value.value, opts);
-						}
-
-						//Its possible that there is no input with the name
-					});
-				}
-
-				//Perform a topological sort
-
-				const topologic = topologicalSort(graph);
-				//This stores intermediate states during execution
-				for (let i = 0, c = topologic.length; i < c; i++) {
-					const nodeId = topologic[i];
-
-					const node = graph.getNode(nodeId);
-
-					// Might happen with graphs that have not cleaned up their edges to nowhere
-					if (!node) {
-						continue;
-					}
-					//Execute the node
-					const res = await (node as DataflowNode).dataflow?.run();
-					if (res.error) {
-						//@ts-ignore
-						(res.error as BatchRunError).nodeId = nodeId;
-						throw res.error;
-					}
-
-					if (stats) {
-						statsTracker[nodeId] = res;
-					}
-
-					//Propagate the values. No need to wait as it is a oneshot
-					ctx.propagate(nodeId, true);
-				}
-
-				let output: BatchExecution['output'] = undefined;
-
-				//Get the output node
-				const outputNode = Object.values(graph.nodes).find(
-					x => x.factory.type === 'studio.tokens.generic.output'
-				);
-
-				if (outputNode) {
-					//Output has a dynamic amount of ports, so emit a single object with each of them
-					output = Object.fromEntries(
-
-						Object.entries(outputNode.inputs)
-							// eslint-disable-next-line @typescript-eslint/no-unused-vars
-							.filter(([_, v]) => v.pType == DATAFLOW_PORT)
-							.map(([key, value]: [string, Output]) => {
-								return [
-									key,
-									{
-										value: value.value,
-										type: value.type
-									}
-								];
-							})
-					);
-				}
-
-				const end = performance.now();
-				return {
-					order: topologic,
-					stats: statsTracker,
-					start,
-					end,
-					output
-				};
-			}
 		} as DataFlowCapability;
 
 		graph.on('edgeRemoved', edge => {
@@ -323,6 +216,120 @@ export const DataFlowCapabilityFactory: CapabilityFactory = {
 	}
 };
 
+
+export type DataflowGraph = ApplyCapabilities<Graph, [WithDataFlow]>;
+
+/**
+ * Executes the graph as a single batch. This will execute all the nodes in the graph and return the output of the output node
+ * Note that this can have side effects and you should create a new instance of a graph between runs if you want to isolate the execution
+ * @param opts
+ * @throws {BatchRunError}
+ * @returns
+ */
+export const execute = async (graph: DataflowGraph, opts?: GraphExecuteOptions): Promise<BatchExecution> => {
+
+	if (!graph.capabilities.dataFlow){
+		throw new Error('Dataflow capability not found');
+	}
+
+	const { inputs, stats } = opts || {};
+
+	const start = performance.now();
+	const statsTracker = {};
+
+	if (inputs) {
+		const input = Object.values(graph.nodes).find(
+			x => x.factory.type === 'studio.tokens.generic.input'
+		);
+		if (!input) {
+			throw new Error('No input node found');
+		}
+
+		//Set the inputs for execution
+		Object.entries(inputs).forEach(([key, value]) => {
+			const opts: ISetValue = {
+				//We are controlling propagation
+				noPropagate: true
+			};
+			//Only necessary if there is dynamic typing involved
+			if (value.type) {
+				opts.type = value.type;
+			}
+			const port = input.inputs[key] as Input;
+
+			if (port && port.pType == DATAFLOW_PORT) {
+				port.setValue(value.value, opts);
+			}
+
+			//Its possible that there is no input with the name
+		});
+	}
+
+	//Perform a topological sort
+
+	const topologic = topologicalSort(graph);
+	//This stores intermediate states during execution
+	for (let i = 0, c = topologic.length; i < c; i++) {
+		const nodeId = topologic[i];
+
+		const node = graph.getNode(nodeId);
+
+		// Might happen with graphs that have not cleaned up their edges to nowhere
+		if (!node) {
+			continue;
+		}
+		//Execute the node
+		const res = await (node as DataflowNode).dataflow?.run();
+		if (res.error) {
+			//@ts-ignore
+			(res.error as BatchRunError).nodeId = nodeId;
+			throw res.error;
+		}
+
+		if (stats) {
+			statsTracker[nodeId] = res;
+		}
+
+		//Propagate the values. No need to wait as it is a oneshot
+		graph.capabilities.dataFlow.propagate(nodeId, true);
+	}
+
+	let output: BatchExecution['output'] = undefined;
+
+	//Get the output node
+	const outputNode = Object.values(graph.nodes).find(
+		x => x.factory.type === 'studio.tokens.generic.output'
+	);
+
+	if (outputNode) {
+		//Output has a dynamic amount of ports, so emit a single object with each of them
+		output = Object.fromEntries(
+
+			Object.entries(outputNode.inputs)
+				// eslint-disable-next-line @typescript-eslint/no-unused-vars
+				.filter(([_, v]) => v.pType == DATAFLOW_PORT)
+				.map(([key, value]: [string, Output]) => {
+					return [
+						key,
+						{
+							value: value.value,
+							type: value.type
+						}
+					];
+				})
+		);
+	}
+
+	const end = performance.now();
+	return {
+		order: topologic,
+		stats: statsTracker,
+		start,
+		end,
+		output
+	};
+}
+
 export type WithDataFlow = {
 	dataFlow: DataFlowCapability;
 };
diff --git a/packages/vscode-example-workspace/nodes/example/metadata.yaml b/packages/vscode-example-workspace/nodes/example/metadata.yaml
index 78f726181..5a1668669 100644
--- a/packages/vscode-example-workspace/nodes/example/metadata.yaml
+++ b/packages/vscode-example-workspace/nodes/example/metadata.yaml
@@ -11,9 +11,12 @@ inputs:
   a:
     title : First number
     description: The first number to add
-    visible: false
     # These are editor only annotations that can be used to help detect the correct controls
-    annotations: {}
+    annotations: 
+      # The input must be connected to a cvalue
+      requiredConnection : true
+      # Show port in the editor
+      visible: false
     # The json schema that identifies this input
     type: {}
-outputs:
\ No newline at end of file
+outputs: {}
\ No newline at end of file

From f8c670c895fb414d53282e8641ca03ba20501089 Mon Sep 17 00:00:00 2001
From: SorsOps <80043879+sorsOps@users.noreply.github.com>
Date: Wed, 7 Aug 2024 11:24:35 +0200
Subject: [PATCH 08/10] Extract the execute function out of the dataflow engine

---
 .../graph-engine/src/capabilities/dataflow.ts     | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/packages/graph-engine/src/capabilities/dataflow.ts b/packages/graph-engine/src/capabilities/dataflow.ts
index b93cc5050..3a558d94f 100644
--- a/packages/graph-engine/src/capabilities/dataflow.ts
+++ b/packages/graph-engine/src/capabilities/dataflow.ts
@@ -22,7 +22,6 @@ export interface DataFlowCapability {
 	 * @returns
 	 */
 	propagate(nodeId: string, oneShot?: boolean): Promise<void>;
-
 }
 
 export type InputDefinition = {
@@ -156,7 +155,7 @@ export const DataFlowCapabilityFactory: CapabilityFactory = {
 					const nodes = dedupe(affectedNodes);
 					await Promise.all(nodes.map(x => ctx.update(x)));
 				}
-			},
+			}
 		} as DataFlowCapability;
 
 		graph.on('edgeRemoved', edge => {
@@ -216,7 +215,6 @@ export const DataFlowCapabilityFactory: CapabilityFactory = {
 	}
 };
 
-
 export type DataflowGraph = ApplyCapabilities<Graph, [WithDataFlow]>;
 
 /**
@@ -226,9 +224,11 @@ export type DataflowGraph = ApplyCapabilities<Graph, [WithDataFlow]>;
  * @throws {BatchRunError}
  * @returns
  */
-export const execute = async (graph: DataflowGraph, opts?: GraphExecuteOptions): Promise<BatchExecution> => {
-
-	if (!graph.capabilities.dataFlow){
+export const execute = async (
+	graph: DataflowGraph,
+	opts?: GraphExecuteOptions
+): Promise<BatchExecution> => {
+	if (!graph.capabilities.dataFlow) {
 		throw new Error('Dataflow capability not found');
 	}
 
@@ -304,7 +304,6 @@ export const execute = async (graph: DataflowGraph, opts?: GraphExecuteOptions):
 	if (outputNode) {
 		//Output has a dynamic amount of ports, so emit a single object with each of them
 		output = Object.fromEntries(
-
 			Object.entries(outputNode.inputs)
 				// eslint-disable-next-line @typescript-eslint/no-unused-vars
 				.filter(([_, v]) => v.pType == DATAFLOW_PORT)
@@ -328,7 +327,7 @@ export const execute = async (graph: DataflowGraph, opts?: GraphExecuteOptions):
 		end,
 		output
 	};
-}
+};
 
 export type WithDataFlow = {
 	dataFlow: DataFlowCapability;

From 53e30deae373813968f3d59b4d647a11d47399c8 Mon Sep 17 00:00:00 2001
From: SorsOps <80043879+sorsOps@users.noreply.github.com>
Date: Thu, 8 Aug 2024 16:54:10 +0200
Subject: [PATCH 09/10] Seperate out play controls and controlflow

---
 .../src/capabilities/controlFlow.ts           | 58 +-------------
 .../graph-engine/src/capabilities/dataflow.ts | 23 +++---
 .../src/capabilities/hybridFlow.ts            |  0
 .../src/capabilities/playState.ts             | 79 +++++++++++++++++++
 .../src/programmatic/nodes/playControl.ts     | 44 +++++++++++
 .../vscode-example-workspace/metadata.yaml    |  3 +-
 .../nodes/example/metadata.yaml               |  2 +-
 7 files changed, 138 insertions(+), 71 deletions(-)
 create mode 100644 packages/graph-engine/src/capabilities/hybridFlow.ts
 create mode 100644 packages/graph-engine/src/capabilities/playState.ts
 create mode 100644 packages/graph-engine/src/programmatic/nodes/playControl.ts

diff --git a/packages/graph-engine/src/capabilities/controlFlow.ts b/packages/graph-engine/src/capabilities/controlFlow.ts
index 6558c5f57..d1b7bafbc 100644
--- a/packages/graph-engine/src/capabilities/controlFlow.ts
+++ b/packages/graph-engine/src/capabilities/controlFlow.ts
@@ -1,16 +1,11 @@
 import { CapabilityFactory } from './interface.js';
 import { ControlFlowInput } from '@/programmatic/controlflow/input.js';
-import { ControlFlowNode } from '@/programmatic/nodes/controlflow.js';
 import { ControlFlowOutput } from '../programmatic/controlflow/output.js';
 import { Graph } from '../graph/index.js';
 import { GraphSchema } from '@/schemas/index.js';
-import { annotatedPlayState } from '@/annotations/index.js';
+
 
 export interface ControlFlowCapability {
-	start: () => void;
-	stop: () => void;
-	pause: () => void;
-	resume: () => void;
 	/**
 	 * Sends a message from an output to all connected inputs
 	 * @param output
@@ -24,29 +19,10 @@ export interface ControlFlowCapability {
 	) => void;
 }
 
-export enum PlayState {
-	PLAYING = 'playing',
-	STOPPED = 'stopped',
-	PAUSED = 'paused'
-}
 
 export const ControlFlowCapabilityFactory: CapabilityFactory = {
 	name: 'controlFlow',
 	register: (graph: Graph) => {
-		graph.onFinalize('nodeAdded', node => {
-			//Trigger the onStart event if the graph is in play mode
-			if (graph.annotations[annotatedPlayState] === PlayState.PLAYING) {
-				(node as ControlFlowNode).controlflow?.onStart();
-			}
-			return node;
-		});
-
-		graph.onFinalize('serialize', serialized => {
-			//Make sure the playing state is not serialized. This would likely cause issues
-			delete serialized.annotations[annotatedPlayState];
-			return serialized;
-		});
-
 		const ctx = {
 			/**
 			 * Triggers a ripple effect on the graph starting from the given edge
@@ -63,38 +39,6 @@ export const ControlFlowCapabilityFactory: CapabilityFactory = {
 					(input as ControlFlowInput).trigger(val, type);
 					graph.emit('valueSent', edges);
 				});
-			},
-			start: () => {
-				graph.annotations[annotatedPlayState] = 'playing';
-				graph.emit('start', {});
-				// Trigger the start of all the nodes
-				graph.forEachNode(node =>
-					(node as ControlFlowNode).controlflow?.onStart()
-				);
-			},
-			stop: () => {
-				graph.annotations[annotatedPlayState] = PlayState.STOPPED;
-				graph.emit('stop', {});
-				// Trigger the stop of all the nodes
-				graph.forEachNode(node =>
-					(node as ControlFlowNode).controlflow?.onStop()
-				);
-			},
-			pause: () => {
-				graph.annotations[annotatedPlayState] = PlayState.PAUSED;
-				graph.emit('pause', {});
-				// Trigger the pause of all the nodes
-				graph.forEachNode(node =>
-					(node as ControlFlowNode).controlflow?.onPause()
-				);
-			},
-			resume: () => {
-				graph.annotations[annotatedPlayState] = PlayState.PLAYING;
-				graph.emit('resume', {});
-				// Trigger the resume of all the nodes
-				graph.forEachNode(node =>
-					(node as ControlFlowNode).controlflow?.onResume()
-				);
 			}
 		} as ControlFlowCapability;
 
diff --git a/packages/graph-engine/src/capabilities/dataflow.ts b/packages/graph-engine/src/capabilities/dataflow.ts
index 3a558d94f..24fc28851 100644
--- a/packages/graph-engine/src/capabilities/dataflow.ts
+++ b/packages/graph-engine/src/capabilities/dataflow.ts
@@ -48,18 +48,10 @@ export interface StatRecord {
 }
 
 export interface IUpdateOpts {
-	/**
-	 * If true, no memoization will be performed
-	 */
-	noMemo?: boolean;
 	/**
 	 * If true, the update will not be propagated to the successor nodes
 	 */
 	noRecursive?: boolean;
-	/**
-	 * If true, we won't compare the input values to see if the node needs to be updated
-	 */
-	noCompare?: boolean;
 }
 
 export interface BatchExecution {
@@ -75,6 +67,9 @@ export interface BatchExecution {
 	};
 }
 
+/**
+ * Creates a dataflow capability for the graph
+ */
 export const DataFlowCapabilityFactory: CapabilityFactory = {
 	name: 'dataFlow',
 	register: (graph: Graph) => {
@@ -215,11 +210,20 @@ export const DataFlowCapabilityFactory: CapabilityFactory = {
 	}
 };
 
+export type WithDataFlow = {
+	dataFlow: DataFlowCapability;
+};
+
+
 export type DataflowGraph = ApplyCapabilities<Graph, [WithDataFlow]>;
 
 /**
  * Executes the graph as a single batch. This will execute all the nodes in the graph and return the output of the output node
  * Note that this can have side effects and you should create a new instance of a graph between runs if you want to isolate the execution
+ * 
+ * Note that you can achieve the same effect by changing the inputs on the graph and calling the run method on the Input node.
+ * 
+ * The difference is that this method will provide additional metadata about the execution and allow for journaling to occur
  * @param opts
  * @throws {BatchRunError}
  * @returns
@@ -329,6 +333,3 @@ export const execute = async (
 	};
 };
 
-export type WithDataFlow = {
-	dataFlow: DataFlowCapability;
-};
diff --git a/packages/graph-engine/src/capabilities/hybridFlow.ts b/packages/graph-engine/src/capabilities/hybridFlow.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/graph-engine/src/capabilities/playState.ts b/packages/graph-engine/src/capabilities/playState.ts
new file mode 100644
index 000000000..79f8fe01e
--- /dev/null
+++ b/packages/graph-engine/src/capabilities/playState.ts
@@ -0,0 +1,79 @@
+
+
+import { CapabilityFactory } from './interface.js';
+import { Graph } from '../graph/index.js';
+import { PlayControlNode } from '@/programmatic/nodes/playControl.js';
+import { annotatedPlayState } from '@/annotations/index.js';
+
+export interface PlayControlCapability {
+    start: () => void;
+    stop: () => void;
+    pause: () => void;
+    resume: () => void;
+}
+
+export enum PlayState {
+    PLAYING = 'playing',
+    STOPPED = 'stopped',
+    PAUSED = 'paused'
+}
+
+export const PlayControlCapabilityFactory: CapabilityFactory = {
+    name: 'playControls',
+    register: (graph: Graph) => {
+        graph.onFinalize('nodeAdded', node => {
+            //Trigger the onStart event if the graph is in play mode
+            if (graph.annotations[annotatedPlayState] === PlayState.PLAYING) {
+                (node as PlayControlNode).playControls?.onStart();
+            }
+            return node;
+        });
+
+        graph.onFinalize('serialize', serialized => {
+            //Make sure the playing state is not serialized. This would likely cause issues
+            delete serialized.annotations[annotatedPlayState];
+            return serialized;
+        });
+
+        const ctx = {
+            start: () => {
+                graph.annotations[annotatedPlayState] = PlayState.PLAYING;
+                graph.emit('start', {});
+                // Trigger the start of all the nodes
+                graph.forEachNode(node =>
+                    (node as PlayControlNode).playControls?.onStart()
+                );
+            },
+            stop: () => {
+                graph.annotations[annotatedPlayState] = PlayState.STOPPED;
+                graph.emit('stop', {});
+                // Trigger the stop of all the nodes
+                graph.forEachNode(node =>
+                    (node as PlayControlNode).playControls?.onStop()
+                );
+            },
+            pause: () => {
+                graph.annotations[annotatedPlayState] = PlayState.PAUSED;
+                graph.emit('pause', {});
+                // Trigger the pause of all the nodes
+                graph.forEachNode(node =>
+                    (node as PlayControlNode).playControls?.onPause()
+                );
+            },
+            resume: () => {
+                graph.annotations[annotatedPlayState] = PlayState.PLAYING;
+                graph.emit('resume', {});
+                // Trigger the resume of all the nodes
+                graph.forEachNode(node =>
+                    (node as PlayControlNode).playControls?.onResume()
+                );
+            }
+        } as PlayControlCapability;
+
+        return ctx;
+    }
+};
+
+export type WithPlay = {
+    playControls: PlayControlCapability;
+};
diff --git a/packages/graph-engine/src/programmatic/nodes/playControl.ts b/packages/graph-engine/src/programmatic/nodes/playControl.ts
new file mode 100644
index 000000000..a37a47a73
--- /dev/null
+++ b/packages/graph-engine/src/programmatic/nodes/playControl.ts
@@ -0,0 +1,44 @@
+import { INodeDefinition, Node } from './node.js';
+
+
+export class PlayControls<T extends Node> {
+    node: T;
+
+    constructor(node: T) {
+        this.node = node;
+    }
+
+    dispose() {
+        this.node = null;
+    }
+    /**
+     * Function to call when the graph has been started.
+     * This is only really necessary for nodes that need to do something when the graph is expected to be running continuously
+     */
+    public onStart = () => { };
+    public onStop = () => { };
+    /**
+     * By default, the node will stop when the graph is paused
+     */
+    public onPause = () => {
+        this.onStop();
+    };
+    /**
+     * By default, the node will start when the graph is resumed
+     */
+    public onResume = () => {
+        this.onStart();
+    };
+}
+
+export interface IPlayControlNode<T extends Node & IPlayControlNode<T> = PlayControlNode> {
+    playControls: PlayControls<T>
+}
+
+export class PlayControlNode extends Node implements IPlayControlNode<PlayControlNode> {
+    playControls: PlayControls<PlayControlNode> = new PlayControls<PlayControlNode>(this);
+    constructor(props: INodeDefinition) {
+        super(props);
+    }
+
+}
diff --git a/packages/vscode-example-workspace/metadata.yaml b/packages/vscode-example-workspace/metadata.yaml
index e6f24f047..c09c39851 100644
--- a/packages/vscode-example-workspace/metadata.yaml
+++ b/packages/vscode-example-workspace/metadata.yaml
@@ -13,5 +13,4 @@ editor:
     edgeType: "bezier"
     layoutType: "dagre"
 logs:
-  output: "./output.log"
-
+  output: "./output.log"
\ No newline at end of file
diff --git a/packages/vscode-example-workspace/nodes/example/metadata.yaml b/packages/vscode-example-workspace/nodes/example/metadata.yaml
index 5a1668669..c90679dda 100644
--- a/packages/vscode-example-workspace/nodes/example/metadata.yaml
+++ b/packages/vscode-example-workspace/nodes/example/metadata.yaml
@@ -13,7 +13,7 @@ inputs:
     description: The first number to add
     # These are editor only annotations that can be used to help detect the correct controls
     annotations: 
-      # The input must be connected to a cvalue
+      # The input must be connected to a value
       requiredConnection : true
       # Show port in the editor
       visible: false

From 1c8dbc69039055c2267fca13ddc4121fb7812310 Mon Sep 17 00:00:00 2001
From: SorsOps <80043879+sorsOps@users.noreply.github.com>
Date: Mon, 24 Feb 2025 12:58:30 +0200
Subject: [PATCH 10/10] Pre merge stash

---
 .changeset/brown-melons-fetch.md              |   5 +
 .changeset/poor-glasses-greet.md              |   5 +
 packages/graph-editor/package.json            |   1 -
 .../src/components/debugger/data.ts           |  67 -----
 .../src/components/debugger/index.css         |  89 ------
 .../src/components/debugger/index.stories.tsx |  52 ----
 .../src/components/debugger/index.tsx         | 182 ------------
 .../src/components/debugger/player.tsx        | 124 --------
 packages/graph-editor/src/components/index.ts |   1 -
 .../src/components/menubar/defaults.tsx       |   7 -
 .../src/components/panels/debugger/index.tsx  |   8 -
 .../src/components/panels/index.tsx           |   1 -
 .../components/toolbar/dropdowns/layout.tsx   |   3 -
 .../src/components/toolbar/layoutButtons.tsx  |   6 -
 packages/graph-engine/src/assert.ts           |  19 ++
 .../src/capabilities/controlFlow.ts           |  51 ----
 .../src/capabilities/interface.ts             |   2 +-
 .../{playState.ts => playControls/index.ts}   |  16 +-
 .../playControls/node.ts}                     |  19 +-
 .../behaviour/customEvents/customEvents.ts    |  17 ++
 .../src/engines/behaviour/eventEmitter.ts     |  28 ++
 .../src/engines/behaviour/execution/engine.ts | 147 ++++++++++
 .../src/engines/behaviour/execution/fiber.ts  | 126 ++++++++
 .../behaviour/execution/resolvePortValue.ts   |  68 +++++
 .../src/engines/behaviour/index.ts            |  28 ++
 .../behaviour/nodes/delay/index.ts}           |   0
 .../src/engines/behaviour/types/asyncNode.ts  |  31 ++
 .../engines/behaviour/types/behaviorNode.ts   |  20 ++
 .../src/engines/behaviour/types/eventNode.ts  | 111 +++++++
 .../behaviour/types}/input.ts                 |  22 +-
 .../behaviour/types}/output.ts                |   6 +-
 .../src/engines/behaviour/types/serialized.ts |  25 ++
 .../src/engines/behaviour/types/utils.ts      |  44 +++
 .../engines/behaviour/types/values/boolean.ts |  11 +
 .../engines/behaviour/types/values/float.ts   |  13 +
 .../behaviour/types/values/integer.ts}        |   0
 .../behaviour/types/values/interface.ts       |  14 +
 .../engines/behaviour/types/values/string.ts  |  11 +
 .../src/engines/behaviour/utils/sleep.ts      |   5 +
 .../src/engines/behaviour/variable.ts         |  33 +++
 .../src/engines/controlflow/index.ts          |  22 ++
 .../controlflow}/nodes/network/anthropic.ts   |   2 +-
 .../controlflow}/nodes/network/delay.ts       |   2 +-
 .../controlflow}/nodes/network/fetchJson.ts   |   2 +-
 .../controlflow}/nodes/network/hold.ts        |   2 +-
 .../controlflow}/nodes/network/index.ts       |   0
 .../controlflow}/nodes/network/passthrough.ts |   0
 .../controlflow}/nodes/network/start.ts       |   0
 .../controlflow}/nodes/network/time.ts        |   2 +-
 .../controlflow}/nodes/network/toMessage.ts   |   2 +-
 .../controlflow/types/basePort.ts}            |   9 +-
 .../controlflow/types}/input.ts               |   6 +-
 .../src/engines/controlflow/types/node.ts     |  45 +++
 .../controlflow/types}/output.ts              |   9 +-
 .../dataflow.ts => engines/dataflow/index.ts} | 194 ++++++-------
 .../{ => engines/dataflow}/nodes/.DS_Store    | Bin
 .../nodes/accessibility/colorBlindness.ts     |   2 +-
 .../dataflow}/nodes/accessibility/index.ts    |   0
 .../dataflow/nodes/accessibility/node.json    |  38 +++
 .../dataflow}/nodes/array/arraySubgraph.ts    |   2 +-
 .../dataflow}/nodes/array/arrify.ts           |   2 +-
 .../dataflow}/nodes/array/concat.ts           |   2 +-
 .../dataflow}/nodes/array/filter.ts           |   2 +-
 .../dataflow}/nodes/array/find.ts             |   0
 .../dataflow}/nodes/array/flatten.ts          |   2 +-
 .../dataflow}/nodes/array/index.ts            |   0
 .../dataflow}/nodes/array/indexArray.ts       |   2 +-
 .../dataflow}/nodes/array/inject.ts           |   0
 .../dataflow}/nodes/array/length.ts           |   0
 .../dataflow}/nodes/array/push.ts             |   2 +-
 .../dataflow}/nodes/array/remove.ts           |   0
 .../dataflow}/nodes/array/replace.ts          |   0
 .../dataflow}/nodes/array/reverse.ts          |   2 +-
 .../dataflow}/nodes/array/slice.ts            |   2 +-
 .../dataflow}/nodes/array/sort.ts             |   2 +-
 .../dataflow}/nodes/color/colorToString.ts    |   2 +-
 .../dataflow}/nodes/color/contrast.ts         |   2 +-
 .../dataflow}/nodes/color/contrasting.ts      |   2 +-
 .../dataflow}/nodes/color/contrastingAlpha.ts |   2 +-
 .../dataflow}/nodes/color/convert.ts          |   2 +-
 .../dataflow}/nodes/color/create.ts           |   2 +-
 .../dataflow}/nodes/color/darken.ts           |   2 +-
 .../dataflow}/nodes/color/deconstruct.ts      |   2 +-
 .../dataflow}/nodes/color/deltaE.ts           |   0
 .../dataflow}/nodes/color/distance.ts         |   0
 .../dataflow}/nodes/color/flattenAlpha.ts     |   0
 .../dataflow}/nodes/color/index.ts            |   0
 .../dataflow}/nodes/color/lib/flattenAlpha.ts |   0
 .../dataflow}/nodes/color/lib/sortColors.ts   |   0
 .../dataflow}/nodes/color/lib/spaces.ts       |   0
 .../nodes/color/lib/transparentize.ts         |   0
 .../dataflow}/nodes/color/lib/utils.ts        |   0
 .../dataflow}/nodes/color/lighten.ts          |   0
 .../dataflow}/nodes/color/matchAlpha.ts       |   0
 .../{ => engines/dataflow}/nodes/color/mix.ts |   0
 .../dataflow}/nodes/color/name.ts             |   0
 .../dataflow}/nodes/color/poline.ts           |   0
 .../dataflow}/nodes/color/range.ts            |   0
 .../dataflow}/nodes/color/scale.ts            |   0
 .../dataflow}/nodes/color/sortByDistance.ts   |   0
 .../dataflow}/nodes/color/stringToColor.ts    |   0
 .../dataflow}/nodes/color/wheel.ts            |   0
 .../dataflow}/nodes/css/accessibleClamp.ts    |   0
 .../{ => engines/dataflow}/nodes/css/box.ts   |   0
 .../dataflow}/nodes/css/cssFunction.ts        |   0
 .../{ => engines/dataflow}/nodes/css/index.ts |   0
 .../{ => engines/dataflow}/nodes/css/map.ts   |   0
 .../dataflow}/nodes/curves/bezier.ts          |   0
 .../nodes/curves/constructFloatCurve.ts       |   0
 .../nodes/curves/deconstructFloatCurve.ts     |   0
 .../dataflow}/nodes/curves/flipFloatCurve.ts  |   0
 .../dataflow}/nodes/curves/floatCurve.ts      |   0
 .../dataflow}/nodes/curves/index.ts           |   0
 .../dataflow}/nodes/curves/presetBeziers.ts   |   0
 .../dataflow}/nodes/curves/sample.ts          |   0
 .../nodes/curves/sampleFloatCurve.ts          |   0
 .../dataflow}/nodes/generic/constant.ts       |   0
 .../dataflow}/nodes/generic/index.ts          |   0
 .../dataflow}/nodes/generic/input.ts          |   2 +-
 .../dataflow}/nodes/generic/note.ts           |   0
 .../dataflow}/nodes/generic/objectMerge.ts    |   0
 .../dataflow}/nodes/generic/objectProperty.ts |   0
 .../dataflow}/nodes/generic/objectify.ts      |   0
 .../dataflow}/nodes/generic/output.ts         |   2 +-
 .../dataflow}/nodes/generic/panic.ts          |   0
 .../dataflow}/nodes/generic/passthrough.ts    |   0
 .../dataflow}/nodes/generic/subgraph.ts       |   2 +-
 .../dataflow/nodes/generic/testDraw.ts        |   0
 .../dataflow}/nodes/gradient/gradientStop.ts  |   0
 .../dataflow}/nodes/gradient/index.ts         |   0
 .../src/{ => engines/dataflow}/nodes/index.ts |   0
 .../{ => engines/dataflow}/nodes/logic/and.ts |   0
 .../dataflow}/nodes/logic/compare.ts          |   0
 .../{ => engines/dataflow}/nodes/logic/if.ts  |   0
 .../dataflow}/nodes/logic/index.ts            |   0
 .../{ => engines/dataflow}/nodes/logic/not.ts |   0
 .../{ => engines/dataflow}/nodes/logic/or.ts  |   0
 .../dataflow}/nodes/logic/switch.ts           |   0
 .../{ => engines/dataflow}/nodes/math/abs.ts  |   0
 .../{ => engines/dataflow}/nodes/math/add.ts  |   0
 .../dataflow}/nodes/math/addVariadic.ts       |   0
 .../{ => engines/dataflow}/nodes/math/ceil.ts |   0
 .../dataflow}/nodes/math/clamp.ts             |   0
 .../dataflow}/nodes/math/closestNumber.ts     |   0
 .../{ => engines/dataflow}/nodes/math/cos.ts  |   0
 .../dataflow}/nodes/math/count.ts             |   0
 .../dataflow}/nodes/math/difference.ts        |   0
 .../dataflow}/nodes/math/divide.ts            |   0
 .../dataflow}/nodes/math/divideVariadic.ts    |   0
 .../{ => engines/dataflow}/nodes/math/eval.ts |   0
 .../{ => engines/dataflow}/nodes/math/exp.ts  |   0
 .../dataflow}/nodes/math/floor.ts             |   0
 .../dataflow}/nodes/math/fluid.ts             |   0
 .../dataflow}/nodes/math/index.ts             |   0
 .../{ => engines/dataflow}/nodes/math/lerp.ts |   0
 .../{ => engines/dataflow}/nodes/math/mod.ts  |   0
 .../dataflow}/nodes/math/multiply.ts          |   0
 .../dataflow}/nodes/math/multiplyVariadic.ts  |   0
 .../{ => engines/dataflow}/nodes/math/pow.ts  |   0
 .../dataflow}/nodes/math/random.ts            |   0
 .../dataflow}/nodes/math/rangeMapping.ts      |   0
 .../dataflow}/nodes/math/round.ts             |   0
 .../{ => engines/dataflow}/nodes/math/sin.ts  |   0
 .../{ => engines/dataflow}/nodes/math/snap.ts |   0
 .../{ => engines/dataflow}/nodes/math/sqrt.ts |   0
 .../dataflow}/nodes/math/subtract.ts          |   0
 .../dataflow}/nodes/math/subtractVariadic.ts  |   0
 .../{ => engines/dataflow}/nodes/math/tan.ts  |   0
 .../dataflow}/nodes/preview/colorCompare.ts   |   0
 .../dataflow}/nodes/preview/colorScale.ts     |   0
 .../dataflow}/nodes/preview/curve.ts          |   0
 .../dataflow}/nodes/preview/index.ts          |   0
 .../dataflow}/nodes/preview/mathExpression.ts |   0
 .../dataflow}/nodes/preview/number.ts         |   0
 .../dataflow}/nodes/preview/swatch.ts         |   0
 .../dataflow}/nodes/search/findFirst.ts       |   0
 .../dataflow}/nodes/search/index.ts           |   0
 .../dataflow}/nodes/search/linear.ts          |   0
 .../dataflow}/nodes/secret/index.ts           |   0
 .../dataflow}/nodes/secret/retrieve.ts        |   0
 .../dataflow}/nodes/series/alternating.ts     |   0
 .../dataflow}/nodes/series/arithmetic.ts      |   0
 .../nodes/series/exponentialDecay.ts          |   0
 .../dataflow}/nodes/series/fibonacci.ts       |   0
 .../dataflow}/nodes/series/geometric.ts       |   0
 .../dataflow}/nodes/series/harmonic.ts        |   0
 .../dataflow}/nodes/series/index.ts           |   0
 .../dataflow}/nodes/series/inverseLinear.ts   |   0
 .../dataflow}/nodes/series/linear.ts          |   0
 .../dataflow}/nodes/series/power.ts           |   0
 .../dataflow}/nodes/string/case.ts            |   0
 .../dataflow}/nodes/string/index.ts           |   0
 .../dataflow}/nodes/string/interpolate.ts     |   0
 .../dataflow}/nodes/string/join.ts            |   0
 .../dataflow}/nodes/string/lowercase.ts       |   0
 .../dataflow}/nodes/string/normalize.ts       |   0
 .../dataflow}/nodes/string/pad.ts             |   0
 .../dataflow}/nodes/string/regex.ts           |   0
 .../dataflow}/nodes/string/replace.ts         |   0
 .../dataflow}/nodes/string/split.ts           |   0
 .../dataflow}/nodes/string/stringify.ts       |   0
 .../dataflow}/nodes/string/uppercase.ts       |   0
 .../dataflow}/nodes/typing/assertDefined.ts   |   0
 .../dataflow}/nodes/typing/hasValue.ts        |   0
 .../dataflow}/nodes/typing/index.ts           |   0
 .../dataflow}/nodes/typing/parseNumber.ts     |   0
 .../dataflow}/nodes/typing/parseUnit.ts       |   0
 .../dataflow}/nodes/typing/passUnit.ts        |   0
 .../nodes/typography/baseFontSize.ts          |   0
 .../dataflow}/nodes/typography/index.ts       |   0
 .../dataflow}/nodes/vector2/create.ts         |   0
 .../dataflow}/nodes/vector2/destructure.ts    |   0
 .../dataflow}/nodes/vector2/index.ts          |   0
 .../dataflow}/topologicSort.ts                |   2 +-
 .../dataflow/types}/base.ts                   |  11 +-
 .../src/engines/dataflow/types/input.ts       | 173 +++++++++++
 .../dataflow/types/node.ts}                   |  10 +-
 .../src/engines/dataflow/types/output.ts      |  89 ++++++
 packages/graph-engine/src/graph/graph.ts      | 178 +-----------
 packages/graph-engine/src/graph/index.ts      |   2 -
 packages/graph-engine/src/graph/terminals.ts  |  26 --
 packages/graph-engine/src/graph/types.ts      |   4 +-
 packages/graph-engine/src/index.ts            |  18 +-
 .../graph-engine/src/programmatic/edge.ts     |  16 +-
 .../graph-engine/src/programmatic/input.ts    |  13 +-
 .../graph-engine/src/programmatic/node.ts     | 209 +++-----------
 .../src/programmatic/nodes/controlflow.ts     |  89 ------
 .../src/programmatic/nodes/node.ts            | 273 ------------------
 .../graph-engine/src/programmatic/output.ts   |   6 +-
 .../graph-engine/src/programmatic/port.ts     |   4 +-
 .../src/{programmatic => types}/annotated.ts  |   0
 .../graph-engine/src/types/annotations.ts     |   1 +
 .../{graph/interfaces.ts => types/logger.ts}  |   0
 packages/storybook-react/scripts/bridge.ts    |   2 +-
 patches/react-virtualized+9.22.5.patch        |  11 -
 235 files changed, 1386 insertions(+), 1548 deletions(-)
 create mode 100644 .changeset/brown-melons-fetch.md
 create mode 100644 .changeset/poor-glasses-greet.md
 delete mode 100644 packages/graph-editor/src/components/debugger/data.ts
 delete mode 100644 packages/graph-editor/src/components/debugger/index.css
 delete mode 100644 packages/graph-editor/src/components/debugger/index.stories.tsx
 delete mode 100644 packages/graph-editor/src/components/debugger/index.tsx
 delete mode 100644 packages/graph-editor/src/components/debugger/player.tsx
 delete mode 100644 packages/graph-editor/src/components/panels/debugger/index.tsx
 create mode 100644 packages/graph-engine/src/assert.ts
 delete mode 100644 packages/graph-engine/src/capabilities/controlFlow.ts
 rename packages/graph-engine/src/capabilities/{playState.ts => playControls/index.ts} (80%)
 rename packages/graph-engine/src/{programmatic/nodes/playControl.ts => capabilities/playControls/node.ts} (61%)
 create mode 100644 packages/graph-engine/src/engines/behaviour/customEvents/customEvents.ts
 create mode 100644 packages/graph-engine/src/engines/behaviour/eventEmitter.ts
 create mode 100644 packages/graph-engine/src/engines/behaviour/execution/engine.ts
 create mode 100644 packages/graph-engine/src/engines/behaviour/execution/fiber.ts
 create mode 100644 packages/graph-engine/src/engines/behaviour/execution/resolvePortValue.ts
 create mode 100644 packages/graph-engine/src/engines/behaviour/index.ts
 rename packages/graph-engine/src/{capabilities/hybridFlow.ts => engines/behaviour/nodes/delay/index.ts} (100%)
 create mode 100644 packages/graph-engine/src/engines/behaviour/types/asyncNode.ts
 create mode 100644 packages/graph-engine/src/engines/behaviour/types/behaviorNode.ts
 create mode 100644 packages/graph-engine/src/engines/behaviour/types/eventNode.ts
 rename packages/graph-engine/src/{programmatic/dataflow => engines/behaviour/types}/input.ts (86%)
 rename packages/graph-engine/src/{programmatic/dataflow => engines/behaviour/types}/output.ts (92%)
 create mode 100644 packages/graph-engine/src/engines/behaviour/types/serialized.ts
 create mode 100644 packages/graph-engine/src/engines/behaviour/types/utils.ts
 create mode 100644 packages/graph-engine/src/engines/behaviour/types/values/boolean.ts
 create mode 100644 packages/graph-engine/src/engines/behaviour/types/values/float.ts
 rename packages/graph-engine/src/{nodes/generic/testDraw.ts => engines/behaviour/types/values/integer.ts} (100%)
 create mode 100644 packages/graph-engine/src/engines/behaviour/types/values/interface.ts
 create mode 100644 packages/graph-engine/src/engines/behaviour/types/values/string.ts
 create mode 100644 packages/graph-engine/src/engines/behaviour/utils/sleep.ts
 create mode 100644 packages/graph-engine/src/engines/behaviour/variable.ts
 create mode 100644 packages/graph-engine/src/engines/controlflow/index.ts
 rename packages/graph-engine/src/{ => engines/controlflow}/nodes/network/anthropic.ts (97%)
 rename packages/graph-engine/src/{ => engines/controlflow}/nodes/network/delay.ts (96%)
 rename packages/graph-engine/src/{ => engines/controlflow}/nodes/network/fetchJson.ts (96%)
 rename packages/graph-engine/src/{ => engines/controlflow}/nodes/network/hold.ts (95%)
 rename packages/graph-engine/src/{ => engines/controlflow}/nodes/network/index.ts (100%)
 rename packages/graph-engine/src/{ => engines/controlflow}/nodes/network/passthrough.ts (100%)
 rename packages/graph-engine/src/{ => engines/controlflow}/nodes/network/start.ts (100%)
 rename packages/graph-engine/src/{ => engines/controlflow}/nodes/network/time.ts (94%)
 rename packages/graph-engine/src/{ => engines/controlflow}/nodes/network/toMessage.ts (96%)
 rename packages/graph-engine/src/{programmatic/controlflow/base.ts => engines/controlflow/types/basePort.ts} (77%)
 rename packages/graph-engine/src/{programmatic/controlflow => engines/controlflow/types}/input.ts (86%)
 create mode 100644 packages/graph-engine/src/engines/controlflow/types/node.ts
 rename packages/graph-engine/src/{programmatic/controlflow => engines/controlflow/types}/output.ts (70%)
 rename packages/graph-engine/src/{capabilities/dataflow.ts => engines/dataflow/index.ts} (66%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/.DS_Store (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/accessibility/colorBlindness.ts (97%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/accessibility/index.ts (100%)
 create mode 100644 packages/graph-engine/src/engines/dataflow/nodes/accessibility/node.json
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/array/arraySubgraph.ts (99%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/array/arrify.ts (93%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/array/concat.ts (94%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/array/filter.ts (98%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/array/find.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/array/flatten.ts (94%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/array/index.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/array/indexArray.ts (95%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/array/inject.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/array/length.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/array/push.ts (94%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/array/remove.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/array/replace.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/array/reverse.ts (93%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/array/slice.ts (93%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/array/sort.ts (95%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/color/colorToString.ts (95%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/color/contrast.ts (96%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/color/contrasting.ts (97%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/color/contrastingAlpha.ts (98%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/color/convert.ts (95%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/color/create.ts (96%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/color/darken.ts (95%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/color/deconstruct.ts (96%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/color/deltaE.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/color/distance.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/color/flattenAlpha.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/color/index.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/color/lib/flattenAlpha.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/color/lib/sortColors.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/color/lib/spaces.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/color/lib/transparentize.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/color/lib/utils.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/color/lighten.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/color/matchAlpha.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/color/mix.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/color/name.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/color/poline.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/color/range.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/color/scale.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/color/sortByDistance.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/color/stringToColor.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/color/wheel.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/css/accessibleClamp.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/css/box.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/css/cssFunction.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/css/index.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/css/map.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/curves/bezier.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/curves/constructFloatCurve.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/curves/deconstructFloatCurve.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/curves/flipFloatCurve.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/curves/floatCurve.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/curves/index.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/curves/presetBeziers.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/curves/sample.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/curves/sampleFloatCurve.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/generic/constant.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/generic/index.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/generic/input.ts (98%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/generic/note.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/generic/objectMerge.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/generic/objectProperty.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/generic/objectify.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/generic/output.ts (96%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/generic/panic.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/generic/passthrough.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/generic/subgraph.ts (98%)
 create mode 100644 packages/graph-engine/src/engines/dataflow/nodes/generic/testDraw.ts
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/gradient/gradientStop.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/gradient/index.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/index.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/logic/and.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/logic/compare.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/logic/if.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/logic/index.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/logic/not.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/logic/or.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/logic/switch.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/math/abs.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/math/add.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/math/addVariadic.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/math/ceil.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/math/clamp.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/math/closestNumber.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/math/cos.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/math/count.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/math/difference.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/math/divide.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/math/divideVariadic.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/math/eval.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/math/exp.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/math/floor.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/math/fluid.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/math/index.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/math/lerp.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/math/mod.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/math/multiply.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/math/multiplyVariadic.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/math/pow.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/math/random.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/math/rangeMapping.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/math/round.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/math/sin.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/math/snap.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/math/sqrt.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/math/subtract.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/math/subtractVariadic.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/math/tan.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/preview/colorCompare.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/preview/colorScale.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/preview/curve.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/preview/index.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/preview/mathExpression.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/preview/number.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/preview/swatch.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/search/findFirst.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/search/index.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/search/linear.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/secret/index.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/secret/retrieve.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/series/alternating.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/series/arithmetic.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/series/exponentialDecay.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/series/fibonacci.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/series/geometric.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/series/harmonic.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/series/index.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/series/inverseLinear.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/series/linear.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/series/power.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/string/case.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/string/index.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/string/interpolate.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/string/join.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/string/lowercase.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/string/normalize.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/string/pad.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/string/regex.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/string/replace.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/string/split.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/string/stringify.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/string/uppercase.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/typing/assertDefined.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/typing/hasValue.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/typing/index.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/typing/parseNumber.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/typing/parseUnit.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/typing/passUnit.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/typography/baseFontSize.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/typography/index.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/vector2/create.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/vector2/destructure.ts (100%)
 rename packages/graph-engine/src/{ => engines/dataflow}/nodes/vector2/index.ts (100%)
 rename packages/graph-engine/src/{graph => engines/dataflow}/topologicSort.ts (94%)
 rename packages/graph-engine/src/{programmatic/dataflow => engines/dataflow/types}/base.ts (81%)
 create mode 100644 packages/graph-engine/src/engines/dataflow/types/input.ts
 rename packages/graph-engine/src/{programmatic/nodes/dataflow.ts => engines/dataflow/types/node.ts} (93%)
 create mode 100644 packages/graph-engine/src/engines/dataflow/types/output.ts
 delete mode 100644 packages/graph-engine/src/graph/terminals.ts
 delete mode 100644 packages/graph-engine/src/programmatic/nodes/controlflow.ts
 delete mode 100644 packages/graph-engine/src/programmatic/nodes/node.ts
 rename packages/graph-engine/src/{programmatic => types}/annotated.ts (100%)
 create mode 100644 packages/graph-engine/src/types/annotations.ts
 rename packages/graph-engine/src/{graph/interfaces.ts => types/logger.ts} (100%)
 delete mode 100644 patches/react-virtualized+9.22.5.patch

diff --git a/.changeset/brown-melons-fetch.md b/.changeset/brown-melons-fetch.md
new file mode 100644
index 000000000..bc5dab05a
--- /dev/null
+++ b/.changeset/brown-melons-fetch.md
@@ -0,0 +1,5 @@
+---
+"@tokens-studio/graph-editor": major
+---
+
+Removes the debugger and any reference to it. It was error prone and required patches to get it to compile correctly due to a problem with react-virtualized. A new debugger as a standalone package for testing and development will be created
diff --git a/.changeset/poor-glasses-greet.md b/.changeset/poor-glasses-greet.md
new file mode 100644
index 000000000..7b8131ac6
--- /dev/null
+++ b/.changeset/poor-glasses-greet.md
@@ -0,0 +1,5 @@
+---
+"@tokens-studio/graph-engine": major
+---
+
+Removes the `visible` value in the edge. This should be handled in an editor and is not important to the the core engine
diff --git a/packages/graph-editor/package.json b/packages/graph-editor/package.json
index b4b2c4efa..add3e0759 100644
--- a/packages/graph-editor/package.json
+++ b/packages/graph-editor/package.json
@@ -60,7 +60,6 @@
     "@tokens-studio/tokens": "^0.3.7",
     "@tokens-studio/types": "^0.5.1",
     "@tokens-studio/ui": "^1.0.13",
-    "@xzdarcy/react-timeline-editor": "^0.1.9",
     "array-move": "^4.0.0",
     "clsx": "^2.1.1",
     "cmdk": "^0.2.0",
diff --git a/packages/graph-editor/src/components/debugger/data.ts b/packages/graph-editor/src/components/debugger/data.ts
deleted file mode 100644
index d776ca27a..000000000
--- a/packages/graph-editor/src/components/debugger/data.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import {
-  CustomTimeLineAction,
-  CustomTimelineRow,
-} from '@/components/debugger/index.js';
-import { action, computed, makeObservable, observable } from 'mobx';
-
-export interface IDebugInfo {
-  rows?: CustomTimelineRow[];
-}
-
-export class DebugInfo {
-  _rows: CustomTimelineRow[] = [];
-  offset = 0;
-  first = true;
-
-  constructor(init?: IDebugInfo) {
-    const { rows = [] } = init || {};
-
-    makeObservable(this, {
-      _rows: observable.ref,
-      rows: computed,
-      addRow: action,
-      addAction: action,
-    });
-
-    this._rows = rows;
-  }
-
-  get rows() {
-    return this._rows;
-  }
-
-  addRow(row: CustomTimelineRow) {
-    this._rows = [...this._rows, row];
-  }
-
-  addAction(rowId: string, action: CustomTimeLineAction) {
-    if (this.first) {
-      this.first = false;
-      this.offset = action.start;
-    }
-
-    this._rows = this._rows.map((row) => {
-      if (row.id === rowId) {
-        return {
-          ...row,
-          actions: [
-            ...row.actions,
-            {
-              ...action,
-              start: action.start - this.offset,
-              end: action.end - this.offset,
-            },
-          ],
-        };
-      }
-      return row;
-    });
-  }
-
-  clear() {
-    this.first = true;
-    this._rows = [];
-  }
-}
-
-export const debugInfo = new DebugInfo();
diff --git a/packages/graph-editor/src/components/debugger/index.css b/packages/graph-editor/src/components/debugger/index.css
deleted file mode 100644
index c71ff0343..000000000
--- a/packages/graph-editor/src/components/debugger/index.css
+++ /dev/null
@@ -1,89 +0,0 @@
-.timeline-editor-time-unit-scale {
-    color: var(--color-neutral-canvas-default-fg-default) !important
-}
-
-.timeline-editor-time-unit {
-    border-right: 1px solid var(--color-neutral-stroke-subtle);
-}
-
-.timeline-editor-action {
-    background-color: unset;
-}
-
-.timeline-editor-time-area  .ReactVirtualized__Grid{
-    overflow: hidden !important;
-}
-
-.timeline-editor {
-    font-family: var(--font-body-md) !important;
-    height: 100% !important;
-    width: unset !important;
-    flex: 1;
-    background-color: inherit !important;
-}
-
-.timeline-editor-edit-row {
-    background: var(--color-neutral-canvas-minimal-bg);
-}
-
-.timeline-player {
-    height: 32px;
-
-    padding: 0 10px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    background-color: #3a3a3a;
-    color: #ddd;
-}
-
-.timeline-player .play-control {
-    width: 24px;
-    height: 24px;
-    border-radius: 4px;
-    display: flex;
-    background-color: #666;
-    justify-content: center;
-    align-items: center;
-}
-
-.timeline-player .time {
-    font-size: 12px;
-    margin: 0 20px;
-    width: 70px;
-}
-
-.timeline-player.rate-control {
-    justify-self: flex-end;
-}
-
-
-.timeline-list {
-    min-width: 150px;
-    margin-top: 42px;
-    height: 258px;
-    flex: 0 1 auto;
-    overflow-y: auto;
-    box-sizing: border-box;
-    overflow-x: clip;
-}
-
-.timeline-list-item {
-    height: 32px;
-    align-items: center;
-    width: 100%;
-    display: flex;
-    padding: 0 10px;
-    box-sizing: border-box;
-}
-
-.timeline-list-item:hover {
-    background-color: var(--colors-focus);
-}
-
-.timeline-list-item .text {
-    height: 28px;
-    width: 100%;
-    padding-left: 10px;
-    border-radius: 4px;
-}
\ No newline at end of file
diff --git a/packages/graph-editor/src/components/debugger/index.stories.tsx b/packages/graph-editor/src/components/debugger/index.stories.tsx
deleted file mode 100644
index 324bdad8e..000000000
--- a/packages/graph-editor/src/components/debugger/index.stories.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { CustomTimelineRow, Debugger } from './index.js';
-import { DebugInfo } from './data.js';
-import { TimelineEffect } from '@xzdarcy/react-timeline-editor';
-import React, { useMemo } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-
-const meta: Meta<typeof Debugger> = {
-  title: 'Components/Debugger',
-  component: Debugger,
-};
-
-const mockEffect: Record<string, TimelineEffect> = {
-  effect0: {
-    id: 'effect0',
-    name: 'foo',
-  },
-  effect1: {
-    id: 'effect1',
-    name: 'bar',
-  },
-};
-
-const mockRows: CustomTimelineRow[] = new Array(20).fill(0).map((_, i) => {
-  return {
-    id: i.toString(),
-    name: 'Row ' + i,
-    actions: new Array(1).fill(0).map((y) => {
-      return {
-        id: `${i}-${y}`,
-        start: i * 2,
-        effectId: 'effect0',
-        end: i * 2 + 2,
-      };
-    }),
-  };
-});
-
-export default meta;
-type Story = StoryObj<typeof Debugger>;
-export const Default: Story = {
-  render: () => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const mockData = useMemo(() => {
-      return new DebugInfo({
-        rows: mockRows,
-      });
-    }, []);
-
-    return <Debugger data={mockData} effects={mockEffect} />;
-  },
-  args: {},
-};
diff --git a/packages/graph-editor/src/components/debugger/index.tsx b/packages/graph-editor/src/components/debugger/index.tsx
deleted file mode 100644
index c9fefa1ae..000000000
--- a/packages/graph-editor/src/components/debugger/index.tsx
+++ /dev/null
@@ -1,182 +0,0 @@
-import './index.css';
-import { DebugInfo, debugInfo } from './data.js';
-import { Stack, Text } from '@tokens-studio/ui';
-import {
-  Timeline,
-  TimelineAction,
-  TimelineEffect,
-  TimelineRow,
-  TimelineState,
-} from '@xzdarcy/react-timeline-editor';
-import { observer } from 'mobx-react-lite';
-import { useGraph } from '@/hooks/useGraph.js';
-import React, { MutableRefObject, useEffect, useRef, useState } from 'react';
-import TimelinePlayer from './player.js';
-
-export interface CustomTimelineRow extends TimelineRow {
-  name: string;
-  actions: CustomTimeLineAction[];
-}
-
-export interface CustomTimeLineAction extends TimelineAction {
-  /**
-   * The color to render the action
-   */
-  color?: string;
-}
-
-export interface DebuggerProps {
-  data: DebugInfo;
-  effects: Record<string, TimelineEffect>;
-}
-
-const DebuggerInner = observer<DebuggerProps>(
-  /** @ts-expect-error observer not typed here...? */
-  ({ data, domRef, timeline, scale }) => {
-    return (
-      <Stack style={{ flex: 1 }}>
-        <div
-          ref={domRef}
-          style={{ overflow: 'auto' }}
-          onScroll={(e) => {
-            const target = e.target as HTMLDivElement;
-            timeline.current?.setScrollTop(target.scrollTop);
-          }}
-          className={'timeline-list'}
-        >
-          {data.rows.map((item) => {
-            return (
-              <div
-                className="timeline-list-item"
-                key={item.id}
-                style={{ padding: 'var(--component-spacing-3xs)' }}
-              >
-                <Text>{item.name}</Text>
-              </div>
-            );
-          })}
-        </div>
-        <Timeline
-          editorData={[...data.rows]}
-          onChange={() => {}}
-          disableDrag
-          onScroll={({ scrollTop }) => {
-            if (domRef.current) {
-              domRef.current.scrollTop = scrollTop;
-            }
-          }}
-          autoScroll={true}
-          scaleSplitCount={~~(scale / 10)}
-          // scale={scale}
-          scaleWidth={scale}
-          ref={timeline}
-          effects={{}}
-          getActionRender={(action, row) => {
-            return (
-              <CustomRender0
-                action={action}
-                row={row}
-                index={Number.parseInt(row.id)}
-              />
-            );
-          }}
-        />
-      </Stack>
-    );
-  },
-);
-
-export const Debugger = ({ data }: DebuggerProps) => {
-  const timelineState =
-    useRef<TimelineState>() as MutableRefObject<TimelineState>;
-  const autoScrollWhenPlay = useRef<boolean>(true);
-  const domRef = useRef<HTMLDivElement>();
-
-  const graph = useGraph();
-
-  useEffect(() => {
-    if (!graph) {
-      return;
-    }
-
-    const NodeStartListener = graph.on('nodeExecuted', (run) => {
-      const existing = debugInfo.rows.find((x) => x.id == run.node.id);
-
-      if (!existing) {
-        debugInfo.addRow({
-          id: run.node.id,
-          name: run.node.factory.type,
-          actions: [],
-        });
-      }
-
-      //Now we need to add the actions
-      debugInfo.addAction(run.node.id, {
-        id: `${run.node.id}-${Date.now()}`,
-        start: run.start,
-        end: run.end,
-        effectId: 'effect0',
-      });
-    });
-
-    return () => {
-      NodeStartListener();
-    };
-  }, [graph]);
-
-  const [scale, setScale] = useState(100);
-
-  return (
-    <Stack direction="column" width="full" style={{ height: '100%' }}>
-      <TimelinePlayer
-        data={data}
-        timelineState={timelineState}
-        autoScrollWhenPlay={autoScrollWhenPlay}
-        setScale={setScale}
-      />
-      <DebuggerInner
-        data={data}
-        /** @ts-expect-error this domRef prop is not typed? */
-        domRef={domRef}
-        scale={scale}
-        timeline={timelineState}
-      />
-    </Stack>
-  );
-};
-
-const colors = [
-  '#F94144',
-  '#F3722C',
-  '#F8961E',
-  '#F9844A',
-  '#F9C74F',
-  '#90BE6D',
-  '#43AA8B',
-  '#577590',
-  '#277DA1',
-  '#2A9D8F',
-  '#2B9348',
-];
-
-export const CustomRender0: React.FC<{
-  action: CustomTimeLineAction;
-  row: TimelineRow;
-  index: number;
-}> = ({ action, index }) => {
-  return (
-    <Stack
-      style={{
-        backgroundColor: action?.color || colors[index % colors.length],
-        height: '100%',
-        borderRadius: '4px',
-        cursor: 'pointer',
-        userSelect: 'none',
-      }}
-      align="center"
-      justify="center"
-    >
-      <Text>{Math.round(action.end - action.start)}ms</Text>
-    </Stack>
-  );
-};
diff --git a/packages/graph-editor/src/components/debugger/player.tsx b/packages/graph-editor/src/components/debugger/player.tsx
deleted file mode 100644
index d27be0cbd..000000000
--- a/packages/graph-editor/src/components/debugger/player.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-import { DebugInfo } from './data.js';
-import { IconButton, Select, Stack, Text } from '@tokens-studio/ui';
-import { TimelineState } from '@xzdarcy/react-timeline-editor';
-import Pause from '@tokens-studio/icons/Pause.js';
-import Play from '@tokens-studio/icons/Play.js';
-import React, { useEffect, useState } from 'react';
-import Trash from '@tokens-studio/icons/Trash.js';
-import UndoAction from '@tokens-studio/icons/UndoAction.js';
-import ZoomIn from '@tokens-studio/icons/ZoomIn.js';
-import ZoomOut from '@tokens-studio/icons/ZoomOut.js';
-
-export const scaleWidth = 160;
-export const scale = 5;
-export const startLeft = 20;
-
-export const Rates = [0.2, 0.5, 1.0, 1.5, 2.0];
-
-export interface TimelinePlayerProps {
-  timelineState: React.MutableRefObject<TimelineState> | undefined;
-  autoScrollWhenPlay: React.MutableRefObject<boolean>;
-  setScale: React.Dispatch<React.SetStateAction<number>>;
-  data: DebugInfo;
-}
-
-const TimelinePlayer = (props: TimelinePlayerProps) => {
-  const { timelineState, autoScrollWhenPlay, setScale, data } = props;
-  const [isPlaying, setIsPlaying] = useState(false);
-  const [time, setTime] = useState(0);
-  const [rate, setRate] = useState(1);
-
-  useEffect(() => {
-    if (!timelineState?.current) return;
-    const engine = timelineState.current;
-    engine.listener.on('play', () => setIsPlaying(true));
-    engine.listener.on('paused', () => setIsPlaying(false));
-    engine.listener.on('afterSetTime', ({ time }) => setTime(time));
-    engine.listener.on('setTimeByTick', ({ time }) => {
-      setTime(time);
-
-      if (autoScrollWhenPlay.current) {
-        const autoScrollFrom = 500;
-        const left = time * (scaleWidth / scale) + startLeft - autoScrollFrom;
-        timelineState.current.setScrollLeft(left);
-      }
-    });
-
-    return () => {
-      if (!engine) return;
-      engine.pause();
-      engine.listener.offAll();
-    };
-  }, []);
-
-  const handlePlayOrPause = () => {
-    if (!timelineState?.current) return;
-    if (timelineState.current.isPlaying) {
-      timelineState.current.pause();
-    } else {
-      timelineState.current.play({ autoEnd: true });
-    }
-  };
-
-  const handleRateChange = (rate: string) => {
-    if (!timelineState?.current) return;
-    const asNum = parseFloat(rate);
-    setRate(asNum);
-    timelineState.current.setPlayRate(asNum);
-  };
-
-  const timeRender = (time: number) => {
-    const float = (parseInt((time % 1) * 100 + '') + '').padStart(2, '0');
-    const min = (parseInt(time / 60 + '') + '').padStart(2, '0');
-    const second = (parseInt((time % 60) + '') + '').padStart(2, '0');
-    return <>{`${min}:${second}.${float.replace('0.', '')}`}</>;
-  };
-
-  const reset = () => {
-    if (!timelineState?.current) return;
-    timelineState.current.setTime(0);
-  };
-  const zoomIn = () => {
-    setScale((prev) => prev * 1.2);
-  };
-  const zoomOut = () => {
-    setScale((prev) => prev * 0.8);
-  };
-  const trash = () => {
-    data.clear();
-  };
-
-  return (
-    <Stack
-      align="center"
-      gap={2}
-      style={{ padding: 'var(--component-spacing-md)' }}
-    >
-      <IconButton
-        icon={isPlaying ? <Pause /> : <Play />}
-        onClick={handlePlayOrPause}
-        emphasis="high"
-      ></IconButton>
-      <Select onValueChange={handleRateChange}>
-        <Select.Trigger label="Speed" value={rate + 'x'} />
-        <Select.Content>
-          {Rates.map((rate) => {
-            return (
-              <Select.Item key={rate} value={'' + rate}>
-                {rate}x
-              </Select.Item>
-            );
-          })}
-        </Select.Content>
-      </Select>
-
-      <IconButton icon={<UndoAction />} onClick={reset}></IconButton>
-      <IconButton icon={<ZoomIn />} onClick={() => zoomIn()}></IconButton>
-      <IconButton icon={<ZoomOut />} onClick={() => zoomOut()}></IconButton>
-      <IconButton icon={<Trash />} onClick={() => trash()}></IconButton>
-      <Text>{timeRender(time)}</Text>
-    </Stack>
-  );
-};
-
-export default TimelinePlayer;
diff --git a/packages/graph-editor/src/components/index.ts b/packages/graph-editor/src/components/index.ts
index d0d76dbf5..af58c8915 100644
--- a/packages/graph-editor/src/components/index.ts
+++ b/packages/graph-editor/src/components/index.ts
@@ -3,7 +3,6 @@ export * from './commandPalette/index.js';
 export * from './contextMenus/index.js';
 export * from './controls/index.js';
 export * from './curveEditor/index.js';
-export * from './debugger/index.js';
 export * from './dialogs/findDialog.js';
 export * from './flow/index.js';
 export * from './hotKeys/index.js';
diff --git a/packages/graph-editor/src/components/menubar/defaults.tsx b/packages/graph-editor/src/components/menubar/defaults.tsx
index ee3f9b04e..5e573fc93 100644
--- a/packages/graph-editor/src/components/menubar/defaults.tsx
+++ b/packages/graph-editor/src/components/menubar/defaults.tsx
@@ -1,5 +1,4 @@
 import { AlignmentPanel } from '../panels/alignment/index.js';
-import { DebugPanel } from '../panels/debugger/index.js';
 import { DropPanel } from '../panels/dropPanel/index.js';
 import { GraphPanel } from '../panels/graph/index.js';
 import { ImperativeEditorRef } from '@/editor/editorTypes.js';
@@ -260,12 +259,6 @@ export const defaultMenuDataFactory = (): Menu =>
             title: 'Alignment + Distribution',
             content: <AlignmentPanel />,
           }),
-          windowButton({
-            name: 'debugger',
-            id: 'debugger',
-            title: 'Debugger',
-            content: <DebugPanel />,
-          }),
           windowButton({
             name: 'settings',
             id: 'settings',
diff --git a/packages/graph-editor/src/components/panels/debugger/index.tsx b/packages/graph-editor/src/components/panels/debugger/index.tsx
deleted file mode 100644
index 0c24234b7..000000000
--- a/packages/graph-editor/src/components/panels/debugger/index.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react';
-
-import { Debugger } from '@/components/debugger/index.js';
-import { debugInfo } from '../../debugger/data.js';
-
-export const DebugPanel = () => {
-  return <Debugger data={debugInfo} effects={{}} />;
-};
diff --git a/packages/graph-editor/src/components/panels/index.tsx b/packages/graph-editor/src/components/panels/index.tsx
index af9aad22d..a883ead65 100644
--- a/packages/graph-editor/src/components/panels/index.tsx
+++ b/packages/graph-editor/src/components/panels/index.tsx
@@ -1,5 +1,4 @@
 export * from './alignment/index.js';
-export * from './debugger/index.js';
 export * from './dropPanel/index.js';
 export * from './graph/index.js';
 export * from './inputs/index.js';
diff --git a/packages/graph-editor/src/components/toolbar/dropdowns/layout.tsx b/packages/graph-editor/src/components/toolbar/dropdowns/layout.tsx
index 7e178847e..df0f53dd4 100644
--- a/packages/graph-editor/src/components/toolbar/dropdowns/layout.tsx
+++ b/packages/graph-editor/src/components/toolbar/dropdowns/layout.tsx
@@ -68,9 +68,6 @@ export const LayoutDropdown = () => {
           <DropdownMenu.Item onSelect={() => onClick('legend')}>
             Legend
           </DropdownMenu.Item>
-          <DropdownMenu.Item onSelect={() => onClick('debugger')}>
-            Debugger
-          </DropdownMenu.Item>
           <DropdownMenu.Item onSelect={() => onClick('dropPanel')}>
             Nodes
           </DropdownMenu.Item>
diff --git a/packages/graph-editor/src/components/toolbar/layoutButtons.tsx b/packages/graph-editor/src/components/toolbar/layoutButtons.tsx
index e39e42144..28341d6dc 100644
--- a/packages/graph-editor/src/components/toolbar/layoutButtons.tsx
+++ b/packages/graph-editor/src/components/toolbar/layoutButtons.tsx
@@ -1,4 +1,3 @@
-import { DebugPanel } from '../panels/debugger/index.js';
 import { DropPanel } from '../panels/dropPanel/index.js';
 import { GraphPanel } from '../panels/graph/index.js';
 
@@ -46,11 +45,6 @@ export const layoutButtons = {
     title: 'Legend',
     content: <Legend />,
   },
-  debugger: {
-    id: 'debugger',
-    title: 'Debugger',
-    content: <DebugPanel />,
-  },
   dropPanel: {
     id: 'dropPanel',
     title: 'Nodes',
diff --git a/packages/graph-engine/src/assert.ts b/packages/graph-engine/src/assert.ts
new file mode 100644
index 000000000..1245c1b2d
--- /dev/null
+++ b/packages/graph-engine/src/assert.ts
@@ -0,0 +1,19 @@
+export class Assert {
+  static mustEqual(value: number, mustEqualThisValue: number, msg = '') {
+    if (value !== mustEqualThisValue) {
+      throw new Error(
+        `failed assertion: ${value} must equal ${mustEqualThisValue}.  ${msg}`
+      );
+    }
+  }
+  static mustBeTrue(condition: boolean, msg = '') {
+    if (!condition) {
+      throw new Error(`failed assertion: ${msg}`);
+    }
+  }
+  static mustBeDefined(variable: any, msg = '') {
+    if (variable === undefined) {
+      throw new Error(`failed assertion: variable must be defined ${msg}`);
+    }
+  }
+}
diff --git a/packages/graph-engine/src/capabilities/controlFlow.ts b/packages/graph-engine/src/capabilities/controlFlow.ts
deleted file mode 100644
index d1b7bafbc..000000000
--- a/packages/graph-engine/src/capabilities/controlFlow.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { CapabilityFactory } from './interface.js';
-import { ControlFlowInput } from '@/programmatic/controlflow/input.js';
-import { ControlFlowOutput } from '../programmatic/controlflow/output.js';
-import { Graph } from '../graph/index.js';
-import { GraphSchema } from '@/schemas/index.js';
-
-
-export interface ControlFlowCapability {
-	/**
-	 * Sends a message from an output to all connected inputs
-	 * @param output
-	 * @param val
-	 * @returns
-	 */
-	ripple: <T = any>(
-		output: ControlFlowOutput,
-		val: T,
-		type?: GraphSchema
-	) => void;
-}
-
-
-export const ControlFlowCapabilityFactory: CapabilityFactory = {
-	name: 'controlFlow',
-	register: (graph: Graph) => {
-		const ctx = {
-			/**
-			 * Triggers a ripple effect on the graph starting from the given edge
-			 * @returns
-			 */
-			ripple<T>(output: ControlFlowOutput, val: T, type?: GraphSchema) {
-				//Get the edges
-				const edges = output._edges;
-				edges.forEach(edge => {
-					const input = graph.getNode(edge.target)?.inputs[edge.targetHandle];
-					if (!input) {
-						return;
-					}
-					(input as ControlFlowInput).trigger(val, type);
-					graph.emit('valueSent', edges);
-				});
-			}
-		} as ControlFlowCapability;
-
-		return ctx;
-	}
-};
-
-export type WithControlFlow = {
-	controlFlow: ControlFlowCapability;
-};
diff --git a/packages/graph-engine/src/capabilities/interface.ts b/packages/graph-engine/src/capabilities/interface.ts
index c939bc4d7..6076d6f12 100644
--- a/packages/graph-engine/src/capabilities/interface.ts
+++ b/packages/graph-engine/src/capabilities/interface.ts
@@ -30,4 +30,4 @@ type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (
 export type ApplyCapabilities<
 	T extends Graph,
 	CapabilityTypes extends Capabilities[]
-> = CombineCapabilities<T, UnionToIntersection<CapabilityTypes[number]>>;
+> = CombineCapabilities<T, UnionToIntersection<CapabilityTypes[number]> & Capabilities>;
diff --git a/packages/graph-engine/src/capabilities/playState.ts b/packages/graph-engine/src/capabilities/playControls/index.ts
similarity index 80%
rename from packages/graph-engine/src/capabilities/playState.ts
rename to packages/graph-engine/src/capabilities/playControls/index.ts
index 79f8fe01e..707a39b99 100644
--- a/packages/graph-engine/src/capabilities/playState.ts
+++ b/packages/graph-engine/src/capabilities/playControls/index.ts
@@ -1,8 +1,8 @@
 
 
-import { CapabilityFactory } from './interface.js';
-import { Graph } from '../graph/index.js';
-import { PlayControlNode } from '@/programmatic/nodes/playControl.js';
+import { CapabilityFactory } from '../interface.js';
+import { Graph } from '../../graph/index.js';
+import { NodeWithPlayControl } from '@/capabilities/playControls/node.js';
 import { annotatedPlayState } from '@/annotations/index.js';
 
 export interface PlayControlCapability {
@@ -24,7 +24,7 @@ export const PlayControlCapabilityFactory: CapabilityFactory = {
         graph.onFinalize('nodeAdded', node => {
             //Trigger the onStart event if the graph is in play mode
             if (graph.annotations[annotatedPlayState] === PlayState.PLAYING) {
-                (node as PlayControlNode).playControls?.onStart();
+                (node as NodeWithPlayControl).playControls?.onStart();
             }
             return node;
         });
@@ -41,7 +41,7 @@ export const PlayControlCapabilityFactory: CapabilityFactory = {
                 graph.emit('start', {});
                 // Trigger the start of all the nodes
                 graph.forEachNode(node =>
-                    (node as PlayControlNode).playControls?.onStart()
+                    (node as NodeWithPlayControl).playControls?.onStart()
                 );
             },
             stop: () => {
@@ -49,7 +49,7 @@ export const PlayControlCapabilityFactory: CapabilityFactory = {
                 graph.emit('stop', {});
                 // Trigger the stop of all the nodes
                 graph.forEachNode(node =>
-                    (node as PlayControlNode).playControls?.onStop()
+                    (node as NodeWithPlayControl).playControls?.onStop()
                 );
             },
             pause: () => {
@@ -57,7 +57,7 @@ export const PlayControlCapabilityFactory: CapabilityFactory = {
                 graph.emit('pause', {});
                 // Trigger the pause of all the nodes
                 graph.forEachNode(node =>
-                    (node as PlayControlNode).playControls?.onPause()
+                    (node as NodeWithPlayControl).playControls?.onPause()
                 );
             },
             resume: () => {
@@ -65,7 +65,7 @@ export const PlayControlCapabilityFactory: CapabilityFactory = {
                 graph.emit('resume', {});
                 // Trigger the resume of all the nodes
                 graph.forEachNode(node =>
-                    (node as PlayControlNode).playControls?.onResume()
+                    (node as NodeWithPlayControl).playControls?.onResume()
                 );
             }
         } as PlayControlCapability;
diff --git a/packages/graph-engine/src/programmatic/nodes/playControl.ts b/packages/graph-engine/src/capabilities/playControls/node.ts
similarity index 61%
rename from packages/graph-engine/src/programmatic/nodes/playControl.ts
rename to packages/graph-engine/src/capabilities/playControls/node.ts
index a37a47a73..9d4fc390b 100644
--- a/packages/graph-engine/src/programmatic/nodes/playControl.ts
+++ b/packages/graph-engine/src/capabilities/playControls/node.ts
@@ -1,6 +1,12 @@
-import { INodeDefinition, Node } from './node.js';
+import { Node } from '../../programmatic/node.js';
 
 
+/**
+ * To use this class, add a `this.playControls = new PlayControls(this);` to your node.
+ * You will then need to override and implement the onStart, onStop, onPause, and onResume functions.
+ * 
+ * Lastly don't forget to call `this.playControls.dispose()` when the node is disposed.
+ */
 export class PlayControls<T extends Node> {
     node: T;
 
@@ -9,6 +15,7 @@ export class PlayControls<T extends Node> {
     }
 
     dispose() {
+        //@ts-ignore This is to force release of the node reference
         this.node = null;
     }
     /**
@@ -31,14 +38,6 @@ export class PlayControls<T extends Node> {
     };
 }
 
-export interface IPlayControlNode<T extends Node & IPlayControlNode<T> = PlayControlNode> {
+export interface IPlayControlNode<T extends Node = Node> {
     playControls: PlayControls<T>
 }
-
-export class PlayControlNode extends Node implements IPlayControlNode<PlayControlNode> {
-    playControls: PlayControls<PlayControlNode> = new PlayControls<PlayControlNode>(this);
-    constructor(props: INodeDefinition) {
-        super(props);
-    }
-
-}
diff --git a/packages/graph-engine/src/engines/behaviour/customEvents/customEvents.ts b/packages/graph-engine/src/engines/behaviour/customEvents/customEvents.ts
new file mode 100644
index 000000000..9baaefba9
--- /dev/null
+++ b/packages/graph-engine/src/engines/behaviour/customEvents/customEvents.ts
@@ -0,0 +1,17 @@
+import { Annotations } from '@/types/annotations.js';
+import { EventEmitter } from '../eventEmitter.js';
+import { Port } from '@/programmatic/port.js';
+
+export class CustomEvent {
+    public label = '';
+    public annotations: Annotations = {};
+    public readonly eventEmitter = new EventEmitter<{
+        [parameterName: string]: any;
+    }>();
+
+    constructor(
+        public readonly id: string,
+        public readonly name: string,
+        public readonly parameters: Port[] = []
+    ) { }
+}
diff --git a/packages/graph-engine/src/engines/behaviour/eventEmitter.ts b/packages/graph-engine/src/engines/behaviour/eventEmitter.ts
new file mode 100644
index 000000000..d7c2f0745
--- /dev/null
+++ b/packages/graph-engine/src/engines/behaviour/eventEmitter.ts
@@ -0,0 +1,28 @@
+export class EventEmitter<T> {
+    private readonly listeners: ((t: T) => void)[] = [];
+
+    addListener(listener: (t: T) => void) {
+        this.listeners.push(listener);
+    }
+
+    removeListener(listener: (t: T) => void) {
+        this.listeners.splice(this.listeners.indexOf(listener), 1);
+    }
+
+    clear() {
+        this.listeners.splice(0, this.listeners.length);
+    }
+
+    emit(event: T) {
+        if (this.listeners.length === 0) return;
+        // copy array before emitting event to ensure even if listener array is modified, everyone listening initially gets the event.
+        // inspired by mrdoob's EventDispatcher
+        this.listeners.slice(0).forEach((listener) => {
+            listener(event);
+        });
+    }
+
+    get listenerCount(): number {
+        return this.listeners.length;
+    }
+}
diff --git a/packages/graph-engine/src/engines/behaviour/execution/engine.ts b/packages/graph-engine/src/engines/behaviour/execution/engine.ts
new file mode 100644
index 000000000..a4eb48644
--- /dev/null
+++ b/packages/graph-engine/src/engines/behaviour/execution/engine.ts
@@ -0,0 +1,147 @@
+import { Assert } from '@/assert.js';
+import { BehaviourNode } from '../types/behaviorNode.js';
+import { EventEmitter } from '../eventEmitter.js';
+import { Fiber } from './fiber.js';
+import { IAsyncNode, IEventNode, isAsyncNode, isEventNode } from '../types/utils.js';
+import { Node } from '@/programmatic/node.js';
+import { resolvePortValue } from './resolvePortValue.js';
+import { sleep } from '../utils/sleep.js';
+
+export class Engine {
+  // tracking the next node+input Port to execute.
+  private readonly fiberQueue: Fiber[] = [];
+  /**
+   * Tracks all async nodes that are currently in progress.
+   */
+  public readonly asyncNodes: IAsyncNode[] = [];
+  public readonly eventNodes: IEventNode[] = [];
+  public readonly onNodeExecutionStart = new EventEmitter<Node>();
+  public readonly onNodeExecutionEnd = new EventEmitter<Node>();
+  public executionSteps = 0;
+
+  constructor(public readonly nodes: BehaviourNode[]) {
+    // collect all event nodes
+    Object.values(nodes).forEach((node) => {
+      if (isEventNode(node)) {
+        this.eventNodes.push(node);
+      }
+    });
+    // init all event nodes at startup
+    this.eventNodes.forEach((eventNode) => {
+      // evaluate input parameters
+      Object.values(eventNode.inputs).forEach((inputPort) => {
+        Assert.mustBeTrue(inputPort.valueTypeName !== 'flow');
+        this.executionSteps += resolvePortValue(this, inputPort);
+      });
+
+      this.onNodeExecutionStart.emit(eventNode);
+      eventNode.init(this);
+      this.executionSteps++;
+      this.onNodeExecutionEnd.emit(eventNode);
+    });
+  }
+
+  dispose() {
+    // dispose all, possibly in-progress, async nodes
+    this.asyncNodes.forEach((asyncNode) => asyncNode.dispose());
+
+    // dispose all event nodes
+    this.eventNodes.forEach((eventNode) => eventNode.dispose(this));
+  }
+
+  /**
+   * 
+   * @param node The calling originating node that is committing to a new fiber
+   * @param outputFlowPortName The name of the output port that the fiber is committing to
+   * @param fiberCompletedListener A callback that is invoked when the fiber is completed
+   */
+  commitToNewFiber(
+    node: BehaviourNode,
+    outputFlowPortName: string,
+    fiberCompletedListener: (() => void) | undefined = undefined
+  ) {
+    Assert.mustBeTrue(isEventNode(node) || isAsyncNode(node));
+    const outputPort = node.outputs[outputFlowPortName];
+    if (outputPort === undefined) {
+      throw new Error(`no Port with the name ${outputFlowPortName}`);
+    }
+    if (outputPort._edges.length > 1) {
+      throw new Error(
+        'invalid for an output flow Port to have multiple downstream links:' +
+        `${node.nodeType}.${outputPort.name}#${node.id} has ${outputPort._edges.length} downlinks`
+      );
+    }
+    if (outputPort._edges.length === 1) {
+      const fiber = new Fiber(
+        this,
+        outputPort._edges[0],
+        fiberCompletedListener
+      );
+      this.fiberQueue.push(fiber);
+    }
+  }
+
+  /**
+   * NOTE: This does not execute all if there are promises.
+   * @param limitInSeconds 
+   * @param limitInSteps 
+   * @returns 
+   */
+  executeAllSync(limitInSeconds = 100, limitInSteps = 100000000): number {
+    const startDateTime = Date.now();
+    let elapsedSeconds = 0;
+    let elapsedSteps = 0;
+    while (
+      elapsedSteps < limitInSteps &&
+      elapsedSeconds < limitInSeconds &&
+      this.fiberQueue.length > 0
+    ) {
+      const currentFiber = this.fiberQueue[0];
+      const startingFiberExecutionSteps = currentFiber.executionSteps;
+      currentFiber.executeStep();
+      elapsedSteps += currentFiber.executionSteps - startingFiberExecutionSteps;
+      if (currentFiber.isCompleted()) {
+        // remove first element
+        this.fiberQueue.shift();
+      }
+      elapsedSeconds = (Date.now() - startDateTime) * 0.001;
+    }
+    this.executionSteps += elapsedSteps;
+
+    return elapsedSteps;
+  }
+
+  /**
+   * 
+   * @param limitInSeconds 
+   * @param limitInSteps 
+   * @returns 
+   */
+  async executeAllAsync(
+    limitInSeconds = 100,
+    limitInSteps = 100000000
+  ): Promise<number> {
+    const startDateTime = Date.now();
+    let elapsedSteps = 0;
+    let elapsedTime = 0;
+    let iterations = 0;
+    do {
+      if (iterations > 0) {
+        // eslint-disable-next-line no-await-in-loop
+        await sleep(0);
+      }
+      elapsedSteps += this.executeAllSync(
+        limitInSeconds - elapsedTime,
+        limitInSteps - elapsedSteps
+      );
+      elapsedTime = (Date.now() - startDateTime) * 0.001;
+      iterations += 1;
+    } while (
+      (this.asyncNodes.length > 0 || this.fiberQueue.length > 0) &&
+      elapsedTime < limitInSeconds &&
+      elapsedSteps < limitInSteps
+    );
+
+    return elapsedSteps;
+  }
+}
diff --git a/packages/graph-engine/src/engines/behaviour/execution/fiber.ts b/packages/graph-engine/src/engines/behaviour/execution/fiber.ts
new file mode 100644
index 000000000..ab3bdf99f
--- /dev/null
+++ b/packages/graph-engine/src/engines/behaviour/execution/fiber.ts
@@ -0,0 +1,126 @@
+import { Assert } from "@/assert.js";
+import { BehaviourNode } from "../types/behaviorNode.js";
+import { Edge } from "@/programmatic/edge.js";
+import { Engine } from "./engine.js";
+import { isAsyncNode, isFlowNode } from "../types/utils.js";
+import { resolvePortValue } from "./resolvePortValue.js";
+
+export class Fiber {
+  private readonly fiberCompletedListenerStack: (() => void)[] = [];
+  private readonly nodes: BehaviourNode[];
+  public executionSteps = 0;
+
+  constructor(
+    public engine: Engine,
+    public nextEval: Edge | null,
+    fiberCompletedListener: (() => void) | undefined = undefined
+  ) {
+    this.nodes = engine.nodes;
+    if (fiberCompletedListener !== undefined) {
+      this.fiberCompletedListenerStack.push(fiberCompletedListener);
+    }
+  }
+
+  /**
+   * 
+   * @param node The calling originating node that is committing to a new fiber
+   * @param outputPortName  The name of the output port that the fiber is committing to
+   * @param fiberCompletedListener  A callback that is invoked when the fiber is completed
+   */
+  commit(
+    node: BehaviourNode,
+    outputPortName: string,
+    fiberCompletedListener: (() => void) | undefined = undefined
+  ) {
+    Assert.mustBeTrue(isFlowNode(node));
+    Assert.mustBeTrue(this.nextEval === null);
+
+    const outputPort = node.outputs[outputPortName];
+    if (!outputPort) {
+      throw new Error(`can not find Port with the name ${outputPortName}`);
+    }
+
+    if (outputPort._edges.length > 1) {
+      throw new Error(
+        'invalid for an output flow Port to have multiple downstream links:' +
+        `${node.nodeType}.${outputPort.name}#${node.id} has ${outputPort._edges.length} downlinks`
+      );
+    }
+    if (outputPort._edges.length === 1) {
+      const edge = outputPort._edges[0];
+      if (!edge) {
+        throw new Error('edge must be defined');
+      }
+      this.nextEval = edge;
+    }
+
+    if (fiberCompletedListener !== undefined) {
+      this.fiberCompletedListenerStack.push(fiberCompletedListener);
+    }
+  }
+
+  /**
+   * Actually executes the next step in the fiber
+   * @returns 
+   */
+  executeStep(): void {
+    // pop the next node off the queue
+    const edge = this.nextEval;
+    this.nextEval = null;
+
+    // nothing waiting, thus go back and start to evaluate any callbacks, in stack order.
+    if (edge === null) {
+      if (this.fiberCompletedListenerStack.length === 0) {
+        return;
+      }
+      const awaitingCallback = this.fiberCompletedListenerStack.pop();
+      awaitingCallback?.();
+      return;
+    }
+
+    //Otherwise we have processing to do
+    //Get the next node to evaluate
+    const node = this.nodes[edge.target];
+
+    node.inputs.forEach((inputPort) => {
+      if (inputPort.valueTypeName !== 'flow') {
+        this.executionSteps += resolvePortValue(this.engine, inputPort);
+      }
+    });
+
+    // first resolve all input values
+    // flow Port is set to true for the one flowing in, while all others are set to false.
+    this.engine.onNodeExecutionStart.emit(node);
+    if (isAsyncNode(node)) {
+      this.engine.asyncNodes.push(node);
+      node.triggered(this.engine, link.PortName, () => {
+        // remove from the list of pending async nodes
+        const index = this.engine.asyncNodes.indexOf(node);
+        this.engine.asyncNodes.splice(index, 1);
+        this.engine.onNodeExecutionEnd.emit(node);
+        this.executionSteps++;
+      });
+      return;
+    }
+    if (isFlowNode(node)) {
+      node.triggered(this, edge.nma);
+      this.engine.onNodeExecutionEnd.emit(node);
+      this.executionSteps++;
+      return;
+    }
+
+    throw new TypeError(
+      `should not get here, unhandled node ${node.nodeType}#${node.id}`
+    );
+  }
+
+  /**
+   * Returns a boolean representing whether the fiber is completed and has no more nodes to evaluate
+   * @returns 
+   */
+  isCompleted() {
+    return (
+      this.fiberCompletedListenerStack.length === 0 && this.nextEval === null
+    );
+  }
+}
diff --git a/packages/graph-engine/src/engines/behaviour/execution/resolvePortValue.ts b/packages/graph-engine/src/engines/behaviour/execution/resolvePortValue.ts
new file mode 100644
index 000000000..651f78ccf
--- /dev/null
+++ b/packages/graph-engine/src/engines/behaviour/execution/resolvePortValue.ts
@@ -0,0 +1,68 @@
+import { Assert } from '@/Assert.js';
+import { BehaviourNode } from '../types/behaviorNode.js';
+import { Engine } from './engine.js';
+import { Port } from '@/programmatic/port.js';
+import { isFunctionNode } from '../types/utils.js';
+
+export function resolvePortValue(
+  engine: Engine,
+  inputPort: Port<BehaviourNode>
+): number {
+  // if it has no edges, leave value on input Port alone.
+  if (inputPort._edges.length === 0) {
+    return 0;
+  }
+
+  const nodes = engine.nodes;
+
+  const upstreamLink = inputPort._edges[0];
+  // caching the target node + Port here increases engine performance by 8% on average.  This is a hotspot.
+  if (
+    upstreamLink.target === undefined ||
+    upstreamLink.targetHandle === undefined
+  ) {
+    Assert.mustBeTrue(inputPort._edges.length === 1);
+
+    // if upstream node is an eval, we just return its last value.
+    upstreamLink._targetNode = nodes[upstreamLink.nodeId];
+    // what is inputPort connected to?
+    upstreamLink._targetPort = upstreamLink._targetNode.outputs.find(
+      (Port) => Port.name === upstreamLink.PortName
+    );
+    if (upstreamLink._targetPort === undefined) {
+      throw new Error(
+        `can not find Port with the name ${upstreamLink.PortName}`
+      );
+    }
+  }
+
+  const upstreamNode = upstreamLink.source;
+  const upstreamOutputPort = upstreamLink.sourceHandle;
+
+  // if upstream is a flow/event/async node, do not evaluate it rather just use its existing output Port values
+  if (!isFunctionNode(upstreamNode)) {
+    inputPort.value = upstreamOutputPort.value;
+    return 0;
+  }
+
+  let executionSteps = 0;
+
+  if (isFunctionNode(upstreamNode)) {
+    // resolve all inputs for the upstream node (this is where the recursion happens)
+    // TODO: This is a bit dangerous as if there are loops in the graph, this will blow up the stack
+    for (const upstreamInputPort of upstreamNode.inputs) {
+      executionSteps += resolvePortValue(engine, upstreamInputPort);
+    }
+
+    engine.onNodeExecutionStart.emit(upstreamNode);
+    upstreamNode.exec(upstreamNode);
+    executionSteps++;
+    engine.onNodeExecutionEnd.emit(upstreamNode);
+
+    // get the output value we wanted.
+    inputPort.value = upstreamOutputPort.value;
+    return executionSteps;
+  }
+
+  return 0;
+}
diff --git a/packages/graph-engine/src/engines/behaviour/index.ts b/packages/graph-engine/src/engines/behaviour/index.ts
new file mode 100644
index 000000000..f150963ed
--- /dev/null
+++ b/packages/graph-engine/src/engines/behaviour/index.ts
@@ -0,0 +1,28 @@
+import { CustomEvent } from "./customEvents/customEvents.js";
+import { Graph } from "../../graph/index.js";
+import { SerializedBehaviourGraph } from "./types/serialized.js";
+import { Variable } from "./variable.js";
+
+
+
+export class BehaviourGraph extends Graph {
+
+    readonly variables: { [name: string]: Variable } = {};
+    readonly customEvents: { [id: string]: CustomEvent } = {};
+
+    override serialize(): SerializedBehaviourGraph {
+
+        const base = super.serialize() as SerializedBehaviourGraph;
+
+        base.variables = Object.keys(this.variables).map(([name, variable]) => {
+            return {
+                name: name,
+                value: variable.get(),
+                type: variable.valueTypeName
+            }
+        });
+
+        return base;
+    }
+}
+
diff --git a/packages/graph-engine/src/capabilities/hybridFlow.ts b/packages/graph-engine/src/engines/behaviour/nodes/delay/index.ts
similarity index 100%
rename from packages/graph-engine/src/capabilities/hybridFlow.ts
rename to packages/graph-engine/src/engines/behaviour/nodes/delay/index.ts
diff --git a/packages/graph-engine/src/engines/behaviour/types/asyncNode.ts b/packages/graph-engine/src/engines/behaviour/types/asyncNode.ts
new file mode 100644
index 000000000..f40ff3fba
--- /dev/null
+++ b/packages/graph-engine/src/engines/behaviour/types/asyncNode.ts
@@ -0,0 +1,31 @@
+import { BehaviourNode } from "./behaviorNode.js";
+import { Engine } from "../execution/engine.js";
+
+export abstract class AbstractAsyncNode extends BehaviourNode {
+
+    abstract triggered(
+        engine: Engine,
+        triggeringSocketName: string,
+        finished: () => void
+    )
+
+}
+
+export class AsyncNode extends AbstractAsyncNode {
+    triggered = (
+        engine: Pick<Engine, 'commitToNewFiber'>,
+        triggeringPortName: string,
+        finished: () => void
+    ) => {
+        this.triggeredInner({
+            read: this.readInput,
+            write: this.writeOutput,
+            commit: (outFlowname, fiberCompletedListener) =>
+                engine.commitToNewFiber(this, outFlowname, fiberCompletedListener),
+            // configuration: this.configuration,
+            graph: this.getGraph(),
+            finished,
+            triggeringPortName
+        });
+    };
+}
diff --git a/packages/graph-engine/src/engines/behaviour/types/behaviorNode.ts b/packages/graph-engine/src/engines/behaviour/types/behaviorNode.ts
new file mode 100644
index 000000000..1e615ee57
--- /dev/null
+++ b/packages/graph-engine/src/engines/behaviour/types/behaviorNode.ts
@@ -0,0 +1,20 @@
+import { BehaviourGraph } from "../index.js";
+import { Engine } from "../execution/engine.js";
+import { Node } from "@/programmatic/node.js";
+
+export enum NodeType {
+    Event = 'Event',
+    Flow = 'Flow',
+    Async = 'Async',
+    Function = 'Function'
+}
+
+
+export class BehaviourNode extends Node<BehaviourGraph> {
+    behaviourType: NodeType = NodeType.Flow;
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    override dispose(engine: Engine): void {
+        // Add your dispose logic here
+    };
+}
\ No newline at end of file
diff --git a/packages/graph-engine/src/engines/behaviour/types/eventNode.ts b/packages/graph-engine/src/engines/behaviour/types/eventNode.ts
new file mode 100644
index 000000000..840ea050e
--- /dev/null
+++ b/packages/graph-engine/src/engines/behaviour/types/eventNode.ts
@@ -0,0 +1,111 @@
+
+import { Assert } from '@/Assert.js';
+import { BehaviourNode } from './behaviorNode.js';
+import { Engine } from '../execution/engine.js';
+import { IEventNode, INode, NodeType } from './NodeInstance.js';
+import { IEventNodeDefinition, NodeCategory } from './NodeDefinitions.js';
+import { IGraph } from '../Graphs/Graph.js';
+import { NodeDescription } from './Registry/NodeDescription.js';
+import { Socket } from '../Sockets/Socket.js';
+
+// no flow inputs, always evaluated on startup
+export class AbstractEventNode extends BehaviourNode implements IEventNode {
+    constructor(
+        description: NodeDescription,
+        graph: IGraph,
+        inputs: Socket[] = [],
+        outputs: Socket[] = [],
+        configuration: NodeConfiguration = {}
+    ) {
+        super({
+            ...description,
+            description: {
+                ...description,
+                category: description.category as NodeCategory
+            },
+            inputs,
+            outputs,
+            graph,
+            configuration,
+            nodeType: NodeType.Event
+        });
+        // no input flow sockets allowed.
+        Assert.mustBeTrue(
+            !Object.values(this.inputs).some((socket) => socket.valueTypeName === 'flow')
+        );
+
+        // must have at least one output flow socket
+        Assert.mustBeTrue(
+            Object.values(this.outputs).some((socket) => socket.valueTypeName === 'flow')
+        );
+    }
+
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    init(engine: Engine) {
+        throw new Error('not implemented');
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    dispose(engine: Engine) {
+        throw new Error('not implemented');
+    }
+}
+
+export class EventNode2 extends AbstractEventNode {
+    constructor(props: {
+        description: NodeDescription;
+        graph: IGraph;
+        inputs?: Socket[];
+        outputs?: Socket[];
+        configuration?: NodeConfiguration;
+    }) {
+        super(
+            props.description,
+            props.graph,
+            props.inputs,
+            props.outputs,
+            props.configuration
+        );
+    }
+}
+
+export class EventNodeInstance<TEventNodeDef extends IEventNodeDefinition>
+    extends Node<NodeType.Event>
+    implements IEventNode {
+    private initInner: TEventNodeDef['init'];
+    private disposeInner: TEventNodeDef['dispose'];
+    private state: TEventNodeDef['initialState'];
+    private readonly outputSocketKeys: string[];
+
+    constructor(
+        nodeProps: Omit<INode, 'nodeType'> &
+            Pick<TEventNodeDef, 'init' | 'dispose' | 'initialState'>
+    ) {
+        super({ ...nodeProps, nodeType: NodeType.Event });
+        this.initInner = nodeProps.init;
+        this.disposeInner = nodeProps.dispose;
+        this.state = nodeProps.initialState;
+        this.outputSocketKeys = nodeProps.outputs.map((s) => s.name);
+    }
+
+    init = (engine: Engine): any => {
+        this.state = this.initInner({
+            read: this.readInput,
+            write: this.writeOutput,
+            state: this.state,
+            outputSocketKeys: this.outputSocketKeys,
+            commit: (outFlowname, fiberCompletedListener) =>
+                engine.commitToNewFiber(this, outFlowname, fiberCompletedListener),
+            configuration: this.configuration,
+            graph: this.graph
+        });
+    };
+
+    dispose(): void {
+        this.disposeInner({
+            state: this.state,
+            graph: this.graph
+        });
+    }
+}
diff --git a/packages/graph-engine/src/programmatic/dataflow/input.ts b/packages/graph-engine/src/engines/behaviour/types/input.ts
similarity index 86%
rename from packages/graph-engine/src/programmatic/dataflow/input.ts
rename to packages/graph-engine/src/engines/behaviour/types/input.ts
index 9f907a1c5..7d48fa862 100644
--- a/packages/graph-engine/src/programmatic/dataflow/input.ts
+++ b/packages/graph-engine/src/engines/behaviour/types/input.ts
@@ -1,10 +1,9 @@
-import { DataFlowCapability } from '@/capabilities/dataflow.js';
+import { DataFlowCapability } from '@/engines/dataflow/index.js';
 import { DataFlowPort } from './base.js';
-import { GraphSchema } from '../../schemas/index.js';
-import { Node } from '../nodes/node.js';
+import { GraphSchema } from '@/schemas/index.js';
+import { Node, TypeDefinition } from '@/programmatic/node.js';
 import { Output } from './output.js';
-import { SerializedInput } from '../../graph/types.js';
-import { TypeDefinition } from '../nodes/node.js';
+import { SerializedInput } from '@/graph/types.js';
 import { action, makeObservable } from 'mobx';
 import getDefaults from 'json-schema-defaults-esm';
 
@@ -12,7 +11,6 @@ export interface IInputProps<V = any, T extends Node = Node> {
 	name: string;
 	type: GraphSchema;
 	value: V;
-	visible?: boolean;
 	node: T;
 	variadic?: boolean;
 	annotations?: Record<string, any>;
@@ -77,7 +75,7 @@ export class Input<V = any, T extends Node = Node> extends DataFlowPort<V, T> {
 							items: sourceNodesOutputTypes[0]
 						};
 					} else {
-						this._dynamicType = undefined;
+						this._dynamicType = null;
 					}
 				} else {
 					this._dynamicType = opts.type;
@@ -95,7 +93,7 @@ export class Input<V = any, T extends Node = Node> extends DataFlowPort<V, T> {
 	 * Resets the value of the input to the default value
 	 */
 	reset() {
-		this._dynamicType = undefined;
+		this._dynamicType = null;
 		return (this._value = getDefaults(this._type) as V);
 	}
 
@@ -112,7 +110,6 @@ export class Input<V = any, T extends Node = Node> extends DataFlowPort<V, T> {
 		const clonedInput = new this.factory({
 			name: this.name,
 			type: this.type,
-			visible: this.visible,
 			node: this.node,
 			variadic: this.variadic,
 			annotations: { ...this.annotations },
@@ -125,7 +122,6 @@ export class Input<V = any, T extends Node = Node> extends DataFlowPort<V, T> {
 	fullType(): TypeDefinition {
 		return {
 			type: this._type,
-			visible: this.visible,
 			variadic: this.variadic
 		};
 	}
@@ -146,9 +142,6 @@ export class Input<V = any, T extends Node = Node> extends DataFlowPort<V, T> {
 		if (type.variadic) {
 			serialized.variadic = true;
 		}
-		if (type.visible == false) {
-			serialized.visible = false;
-		}
 
 		if (Object.keys(this.annotations).length > 0) {
 			serialized.annotations = this.annotations;
@@ -158,8 +151,7 @@ export class Input<V = any, T extends Node = Node> extends DataFlowPort<V, T> {
 	}
 
 	deserialize(serialized: SerializedInput) {
-		this.visible = serialized.visible ?? true;
-		this._dynamicType = serialized.dynamicType || undefined;
+		this._dynamicType = serialized.dynamicType || null;
 		this.annotations = serialized.annotations || {};
 		this._value = serialized.value;
 	}
diff --git a/packages/graph-engine/src/programmatic/dataflow/output.ts b/packages/graph-engine/src/engines/behaviour/types/output.ts
similarity index 92%
rename from packages/graph-engine/src/programmatic/dataflow/output.ts
rename to packages/graph-engine/src/engines/behaviour/types/output.ts
index 47eaaec81..147023158 100644
--- a/packages/graph-engine/src/programmatic/dataflow/output.ts
+++ b/packages/graph-engine/src/engines/behaviour/types/output.ts
@@ -1,7 +1,7 @@
 import { DataFlowPort } from './base.js';
-import { GraphSchema } from '../../schemas/index.js';
+import { GraphSchema } from '@/schemas/index.js';
 import { Input } from './input.js';
-import { Node } from '../nodes/node.js';
+import { Node } from '@/programmatic/node.js';
 import { action, makeObservable } from 'mobx';
 
 export interface IOutputProps<V = any, T extends Node = Node> {
@@ -29,7 +29,7 @@ export class Output<V = any, T extends Node = Node> extends DataFlowPort<V, T> {
 
 	set(value: V, type?: GraphSchema) {
 		this._value = value;
-		this._dynamicType = type;
+		this._dynamicType = type || null;
 	}
 
 	connect(target: Input<V>) {
diff --git a/packages/graph-engine/src/engines/behaviour/types/serialized.ts b/packages/graph-engine/src/engines/behaviour/types/serialized.ts
new file mode 100644
index 000000000..78fecdb23
--- /dev/null
+++ b/packages/graph-engine/src/engines/behaviour/types/serialized.ts
@@ -0,0 +1,25 @@
+import { SerializedGraph } from "@/graph/types.js";
+
+
+export type SerializedVariable = {
+    name: string,
+    value: any,
+    type: string
+}
+
+export type SerializedCustomEvent= {
+    /**
+     * This is the name of the custom event intended for easy lookup
+     */
+    name: string,
+    /**
+     * This is the unique custom event ID
+     */
+    id:string
+}
+
+export type SerializedBehaviourGraph = SerializedGraph & {
+
+    customEvents: SerializedCustomEvent[];
+    variables: SerializedVariable[];
+}
\ No newline at end of file
diff --git a/packages/graph-engine/src/engines/behaviour/types/utils.ts b/packages/graph-engine/src/engines/behaviour/types/utils.ts
new file mode 100644
index 000000000..fabcb1348
--- /dev/null
+++ b/packages/graph-engine/src/engines/behaviour/types/utils.ts
@@ -0,0 +1,44 @@
+import { BehaviourNode, NodeType } from "./behaviorNode.js";
+import { Engine } from "../execution/engine.js";
+import { Fiber } from "../execution/fiber.js";
+import { Node } from "@/programmatic/node.js";
+
+
+export interface IFlowNode extends BehaviourNode {
+    behaviourType: NodeType.Flow;
+    triggered: (fiber: Fiber, triggeringSocketName: string) => void;
+}
+
+export interface IFunctionNode extends BehaviourNode {
+    behaviourType: NodeType.Function;
+    exec: (node: Node) => void;
+}
+
+export interface IEventNode extends BehaviourNode {
+    behaviourType: NodeType.Event;
+    init: (engine: Engine) => void;
+    dispose: (engine: Engine) => void;
+}
+export interface IAsyncNode extends BehaviourNode {
+    behaviourType: NodeType.Async;
+    triggered: (
+        engine: Engine,
+        triggeringSocketName: string,
+        finished: () => void
+    ) => void;
+    dispose: () => void;
+}
+
+
+
+export const isFlowNode = (node: BehaviourNode): node is IFlowNode =>
+    node.behaviourType === NodeType.Flow;
+
+export const isEventNode = (node: BehaviourNode): node is IEventNode =>
+    node.behaviourType === NodeType.Event;
+
+export const isAsyncNode = (node: BehaviourNode): node is IAsyncNode =>
+    node.behaviourType === NodeType.Async;
+
+export const isFunctionNode = (node: BehaviourNode): node is IFunctionNode =>
+    node.behaviourType === NodeType.Function;
diff --git a/packages/graph-engine/src/engines/behaviour/types/values/boolean.ts b/packages/graph-engine/src/engines/behaviour/types/values/boolean.ts
new file mode 100644
index 000000000..5571a6234
--- /dev/null
+++ b/packages/graph-engine/src/engines/behaviour/types/values/boolean.ts
@@ -0,0 +1,11 @@
+import { ValueType } from './interface.js';
+
+export const BooleanValue: ValueType = {
+    name: 'boolean',
+    creator: () => false,
+    deserialize: (value: boolean) => value,
+    serialize: (value: boolean) => value,
+    lerp: (start: boolean, end: boolean, t: number) => (t < 0.5 ? start : end),
+    equals: (a: boolean, b: boolean) => a === b,
+    clone: (value: boolean) => value
+};
diff --git a/packages/graph-engine/src/engines/behaviour/types/values/float.ts b/packages/graph-engine/src/engines/behaviour/types/values/float.ts
new file mode 100644
index 000000000..72fbe6b2d
--- /dev/null
+++ b/packages/graph-engine/src/engines/behaviour/types/values/float.ts
@@ -0,0 +1,13 @@
+import { ValueType } from "./interface.js";
+
+
+export const FloatValue: ValueType = {
+    name: 'float',
+    creator: () => 0,
+    deserialize: (value: string | number) =>
+        typeof value === 'string' ? parseSafeFloat(value, 0) : value,
+    serialize: (value: number) => value,
+    lerp: (start: number, end: number, t: number) => start * (1 - t) + end * t,
+    equals: (a: number, b: number) => a === b,
+    clone: (value: number) => value
+};
diff --git a/packages/graph-engine/src/nodes/generic/testDraw.ts b/packages/graph-engine/src/engines/behaviour/types/values/integer.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/generic/testDraw.ts
rename to packages/graph-engine/src/engines/behaviour/types/values/integer.ts
diff --git a/packages/graph-engine/src/engines/behaviour/types/values/interface.ts b/packages/graph-engine/src/engines/behaviour/types/values/interface.ts
new file mode 100644
index 000000000..f75943d8c
--- /dev/null
+++ b/packages/graph-engine/src/engines/behaviour/types/values/interface.ts
@@ -0,0 +1,14 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export interface ValueType<TValue = any, TJson = any> {
+    name: string;
+    /**
+     * Creates an initial value of this type.
+     * @returns 
+     */
+    creator: () => TValue;
+    deserialize: (value: TJson) => TValue;
+    serialize: (value: TValue) => TJson;
+    lerp: (start: TValue, end: TValue, t: number) => TValue;
+    equals: (a: TValue, b: TValue) => boolean;
+    clone: (value: TValue) => TValue;
+}
diff --git a/packages/graph-engine/src/engines/behaviour/types/values/string.ts b/packages/graph-engine/src/engines/behaviour/types/values/string.ts
new file mode 100644
index 000000000..de6cdbbdb
--- /dev/null
+++ b/packages/graph-engine/src/engines/behaviour/types/values/string.ts
@@ -0,0 +1,11 @@
+import { ValueType } from "./interface.js";
+
+export const StringValue: ValueType = {
+    name: 'string',
+    creator: () => '',
+    deserialize: (value: string) => value,
+    serialize: (value: string) => value,
+    lerp: (start: string, end: string, t: number) => (t < 0.5 ? start : end),
+    equals: (a: string, b: string) => a === b,
+    clone: (value: string) => value
+};
diff --git a/packages/graph-engine/src/engines/behaviour/utils/sleep.ts b/packages/graph-engine/src/engines/behaviour/utils/sleep.ts
new file mode 100644
index 000000000..584a7392f
--- /dev/null
+++ b/packages/graph-engine/src/engines/behaviour/utils/sleep.ts
@@ -0,0 +1,5 @@
+export function sleep(durationInMilliseconds: number) {
+    return new Promise((resolve) =>
+        setTimeout(resolve, Math.round(durationInMilliseconds))
+    );
+}
diff --git a/packages/graph-engine/src/engines/behaviour/variable.ts b/packages/graph-engine/src/engines/behaviour/variable.ts
new file mode 100644
index 000000000..864e11564
--- /dev/null
+++ b/packages/graph-engine/src/engines/behaviour/variable.ts
@@ -0,0 +1,33 @@
+import { Annotations } from '@/types/annotations.js';
+import { EventEmitter } from './eventEmitter.js';
+
+export class Variable {
+  private value: any;
+  public label = '';
+  public metadata: Annotations = {};
+  public version = 0; // this is updated on each change to the variable state.
+  public readonly onChanged = new EventEmitter<Variable>();
+  public type: string;
+
+  constructor(
+    public readonly id: string,
+    public readonly name: string,
+    public readonly valueTypeName: string,
+    public initialValue: any // this is assumed to be properly deseriealized from a string.
+  ) {
+    this.value = this.initialValue;
+    this.type = valueTypeName;
+  }
+
+  get(): any {
+    return this.value;
+  }
+
+  set(newValue: any) {
+    if (newValue !== this.value) {
+      this.value = newValue;
+      this.version++;
+      this.onChanged.emit(this);
+    }
+  }
+}
diff --git a/packages/graph-engine/src/engines/controlflow/index.ts b/packages/graph-engine/src/engines/controlflow/index.ts
new file mode 100644
index 000000000..81620594c
--- /dev/null
+++ b/packages/graph-engine/src/engines/controlflow/index.ts
@@ -0,0 +1,22 @@
+import { ControlFlowInput } from '@/programmatic/controlflow/input.js';
+import { ControlFlowOutput } from '../../programmatic/controlflow/output.js';
+import { DataFlowGraph } from '../dataflow/index.js';
+import { GraphSchema } from '@/schemas/index.js';
+
+
+export class ControlFlowGraph extends DataFlowGraph {
+
+	ripple<T>(output: ControlFlowOutput, val: T, type?: GraphSchema) {
+		//Get the edges
+		const edges = output._edges;
+		edges.forEach(edge => {
+			const input = this.getNode(edge.target)?.inputs[edge.targetHandle];
+			if (!input) {
+				return;
+			}
+			(input as ControlFlowInput).trigger(val, type);
+			this.emit('valueSent', edges);
+		});
+	}
+}
+
diff --git a/packages/graph-engine/src/nodes/network/anthropic.ts b/packages/graph-engine/src/engines/controlflow/nodes/network/anthropic.ts
similarity index 97%
rename from packages/graph-engine/src/nodes/network/anthropic.ts
rename to packages/graph-engine/src/engines/controlflow/nodes/network/anthropic.ts
index 6959fbd47..28506f456 100644
--- a/packages/graph-engine/src/nodes/network/anthropic.ts
+++ b/packages/graph-engine/src/engines/controlflow/nodes/network/anthropic.ts
@@ -1,7 +1,7 @@
 import {
 	ControlFlow,
 	IControlFlowNode
-} from '@/programmatic/nodes/controlflow.js';
+} from '@/engines/controlflow/nodeType/node.js';
 import {
 	Dataflow,
 	IDataflowNode,
diff --git a/packages/graph-engine/src/nodes/network/delay.ts b/packages/graph-engine/src/engines/controlflow/nodes/network/delay.ts
similarity index 96%
rename from packages/graph-engine/src/nodes/network/delay.ts
rename to packages/graph-engine/src/engines/controlflow/nodes/network/delay.ts
index 4aa40ae29..b66c1e946 100644
--- a/packages/graph-engine/src/nodes/network/delay.ts
+++ b/packages/graph-engine/src/engines/controlflow/nodes/network/delay.ts
@@ -1,7 +1,7 @@
 import {
 	ControlFlow,
 	IControlFlowNode
-} from '@/programmatic/nodes/controlflow.js';
+} from '@/engines/controlflow/types/node.js';
 import {
 	Dataflow,
 	IDataflowNode,
diff --git a/packages/graph-engine/src/nodes/network/fetchJson.ts b/packages/graph-engine/src/engines/controlflow/nodes/network/fetchJson.ts
similarity index 96%
rename from packages/graph-engine/src/nodes/network/fetchJson.ts
rename to packages/graph-engine/src/engines/controlflow/nodes/network/fetchJson.ts
index d99bf82cf..0810f48eb 100644
--- a/packages/graph-engine/src/nodes/network/fetchJson.ts
+++ b/packages/graph-engine/src/engines/controlflow/nodes/network/fetchJson.ts
@@ -1,7 +1,7 @@
 import {
 	ControlFlow,
 	IControlFlowNode
-} from '@/programmatic/nodes/controlflow.js';
+} from '@/engines/controlflow/types/node.js';
 import {
 	Dataflow,
 	IDataflowNode,
diff --git a/packages/graph-engine/src/nodes/network/hold.ts b/packages/graph-engine/src/engines/controlflow/nodes/network/hold.ts
similarity index 95%
rename from packages/graph-engine/src/nodes/network/hold.ts
rename to packages/graph-engine/src/engines/controlflow/nodes/network/hold.ts
index 3ac6c06a6..0fdbee3e3 100644
--- a/packages/graph-engine/src/nodes/network/hold.ts
+++ b/packages/graph-engine/src/engines/controlflow/nodes/network/hold.ts
@@ -8,7 +8,7 @@ import {
 import {
 	ControlFlow,
 	IControlFlowNode
-} from '@/programmatic/nodes/controlflow.js';
+} from '@/engines/controlflow/types/node.js';
 import { Node } from '../../programmatic/nodes/node.js';
 import { ToControlInput } from '@/programmatic/controlflow/input.js';
 
diff --git a/packages/graph-engine/src/nodes/network/index.ts b/packages/graph-engine/src/engines/controlflow/nodes/network/index.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/network/index.ts
rename to packages/graph-engine/src/engines/controlflow/nodes/network/index.ts
diff --git a/packages/graph-engine/src/nodes/network/passthrough.ts b/packages/graph-engine/src/engines/controlflow/nodes/network/passthrough.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/network/passthrough.ts
rename to packages/graph-engine/src/engines/controlflow/nodes/network/passthrough.ts
diff --git a/packages/graph-engine/src/nodes/network/start.ts b/packages/graph-engine/src/engines/controlflow/nodes/network/start.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/network/start.ts
rename to packages/graph-engine/src/engines/controlflow/nodes/network/start.ts
diff --git a/packages/graph-engine/src/nodes/network/time.ts b/packages/graph-engine/src/engines/controlflow/nodes/network/time.ts
similarity index 94%
rename from packages/graph-engine/src/nodes/network/time.ts
rename to packages/graph-engine/src/engines/controlflow/nodes/network/time.ts
index 9c5bc9df5..fbcf38baf 100644
--- a/packages/graph-engine/src/nodes/network/time.ts
+++ b/packages/graph-engine/src/engines/controlflow/nodes/network/time.ts
@@ -1,4 +1,4 @@
-import { ControlFlowNode } from '@/programmatic/nodes/controlflow.js';
+import { ControlFlowNode } from '@/engines/controlflow/types/node.js';
 import {
 	ControlFlowOutput,
 	ToControlOutput
diff --git a/packages/graph-engine/src/nodes/network/toMessage.ts b/packages/graph-engine/src/engines/controlflow/nodes/network/toMessage.ts
similarity index 96%
rename from packages/graph-engine/src/nodes/network/toMessage.ts
rename to packages/graph-engine/src/engines/controlflow/nodes/network/toMessage.ts
index d11167f8f..10ccf97af 100644
--- a/packages/graph-engine/src/nodes/network/toMessage.ts
+++ b/packages/graph-engine/src/engines/controlflow/nodes/network/toMessage.ts
@@ -8,7 +8,7 @@ import {
 import {
 	ControlFlow,
 	IControlFlowNode
-} from '@/programmatic/nodes/controlflow.js';
+} from '@/engines/controlflow/types/node.js';
 import { Node } from '../../programmatic/nodes/node.js';
 import { ToControlInput } from '@/programmatic/controlflow/input.js';
 import { ToControlOutput } from '@/programmatic/controlflow/output.js';
diff --git a/packages/graph-engine/src/programmatic/controlflow/base.ts b/packages/graph-engine/src/engines/controlflow/types/basePort.ts
similarity index 77%
rename from packages/graph-engine/src/programmatic/controlflow/base.ts
rename to packages/graph-engine/src/engines/controlflow/types/basePort.ts
index 290f066a6..165310aa0 100644
--- a/packages/graph-engine/src/programmatic/controlflow/base.ts
+++ b/packages/graph-engine/src/engines/controlflow/types/basePort.ts
@@ -1,7 +1,7 @@
 import { AnySchema, GraphSchema } from '@/schemas/index.js';
-import { ControlFlowNode } from '../nodes/controlflow.js';
-import { IPort, Port } from '../port.js';
-import type { Node, TypeDefinition } from '../index.js';
+import { ControlFlowNode } from './node.js';
+import { IPort, Port } from '@/programmatic/port.js';
+import { Node, TypeDefinition } from '@/programmatic/node.js';
 
 export const CONTROL_PORT = 1;
 
@@ -13,7 +13,7 @@ export class ControlFlowPort<
 	T extends ControlFlowNode = ControlFlowNode
 > extends Port<T> {
 	//Note that we need null values for the observable to work
-	protected _dynamicType?: GraphSchema = null;
+	protected _dynamicType?: GraphSchema = undefined;
 	protected _type: GraphSchema;
 
 	pType = CONTROL_PORT;
@@ -24,7 +24,6 @@ export class ControlFlowPort<
 	fullType(): TypeDefinition {
 		return {
 			type: this._type,
-			visible: this.visible,
 			variadic: this.variadic
 		};
 	}
diff --git a/packages/graph-engine/src/programmatic/controlflow/input.ts b/packages/graph-engine/src/engines/controlflow/types/input.ts
similarity index 86%
rename from packages/graph-engine/src/programmatic/controlflow/input.ts
rename to packages/graph-engine/src/engines/controlflow/types/input.ts
index 7acf7f4f2..ec774780d 100644
--- a/packages/graph-engine/src/programmatic/controlflow/input.ts
+++ b/packages/graph-engine/src/engines/controlflow/types/input.ts
@@ -1,7 +1,7 @@
-import { ControlFlowNode } from '../nodes/controlflow.js';
-import { ControlFlowPort } from './base.js';
+import { ControlFlowNode } from './node.js';
+import { ControlFlowPort } from './basePort.js';
 import { GraphSchema } from '@/schemas/index.js';
-import { IPort } from '../port.js';
+import { IPort } from '@/programmatic/port.js';
 
 /**
  * Converts a type definition to a map of ControlFlowInputs
diff --git a/packages/graph-engine/src/engines/controlflow/types/node.ts b/packages/graph-engine/src/engines/controlflow/types/node.ts
new file mode 100644
index 000000000..468e49214
--- /dev/null
+++ b/packages/graph-engine/src/engines/controlflow/types/node.ts
@@ -0,0 +1,45 @@
+import { ControlFlowGraph } from '../index.js';
+import {
+	ControlFlowInput,
+	ControlFlowTriggerFunction
+} from './input.js';
+import { ControlFlowOutput } from './output.js';
+import { Node, TypeDefinition } from '../../../programmatic/node.js';
+
+
+/**
+ * The dataflow node can be used to easily create dataflow based nodes by extending off of it and implementing the execute method
+ */
+export class ControlFlowNode
+	extends Node<ControlFlowGraph> {
+
+
+	/**
+	 * Creates a new input and adds it to the node
+	 * @param name
+	 * @param input
+	 */
+	addInput<T = unknown>(
+		name: string,
+		executor: ControlFlowTriggerFunction<T>,
+		type?: TypeDefinition
+	): ControlFlowInput<T> {
+
+		return this.inputs[name] = new ControlFlowInput<T>({
+			name,
+			on: executor,
+			...type,
+			node: this
+		})
+	}
+
+	addOutput<T = unknown>(name: string, type?: TypeDefinition) {
+		return this.outputs[name] =
+			new ControlFlowOutput<T>({
+				...type,
+				name,
+				node: this
+			})
+	}
+
+}
diff --git a/packages/graph-engine/src/programmatic/controlflow/output.ts b/packages/graph-engine/src/engines/controlflow/types/output.ts
similarity index 70%
rename from packages/graph-engine/src/programmatic/controlflow/output.ts
rename to packages/graph-engine/src/engines/controlflow/types/output.ts
index 8d7c1898a..8e08fe66c 100644
--- a/packages/graph-engine/src/programmatic/controlflow/output.ts
+++ b/packages/graph-engine/src/engines/controlflow/types/output.ts
@@ -1,7 +1,6 @@
-import { ControlFlowCapability } from '@/capabilities/controlFlow.js';
 import { ControlFlowInput } from './input.js';
-import { ControlFlowNode } from '../nodes/controlflow.js';
-import { ControlFlowPort, IControlflowPort } from './base.js';
+import { ControlFlowNode } from './node.js';
+import { ControlFlowPort, IControlflowPort } from './basePort.js';
 import { GraphSchema } from '@/schemas/index.js';
 
 /**
@@ -28,9 +27,7 @@ export class ControlFlowOutput<T = any> extends ControlFlowPort {
 	 * @param val
 	 */
 	trigger(val: T, type?: GraphSchema) {
-		(
-			this.node.getGraph().capabilities.controlFlow as ControlFlowCapability
-		).ripple(this, val, type);
+		this.node.getGraph().ripple(this, val, type);
 	}
 	connect(target: ControlFlowInput) {
 		return this.node.getGraph().connect(this.node, this, target.node, target);
diff --git a/packages/graph-engine/src/capabilities/dataflow.ts b/packages/graph-engine/src/engines/dataflow/index.ts
similarity index 66%
rename from packages/graph-engine/src/capabilities/dataflow.ts
rename to packages/graph-engine/src/engines/dataflow/index.ts
index 24fc28851..e5f54f655 100644
--- a/packages/graph-engine/src/capabilities/dataflow.ts
+++ b/packages/graph-engine/src/engines/dataflow/index.ts
@@ -1,12 +1,13 @@
-import { ApplyCapabilities, CapabilityFactory } from './interface.js';
-import { DATAFLOW_PORT } from '@/programmatic/dataflow/base.js';
-import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
-import { Graph, topologicalSort } from '../graph/index.js';
+
+import { DATAFLOW_PORT } from './types/base.js';
+import { DataflowNode } from '@/engines/dataflow/types/node.js';
+import { Graph, IGraph } from '../../graph/index.js';
 import { GraphSchema } from '@/schemas/index.js';
 import { ISetValue, Output } from '@/programmatic/index.js';
-import { Input } from '@/programmatic/dataflow/input.js';
+import { Input } from './types/input.js';
 import { annotatedVariadicIndex } from '@/annotations/index.js';
-import { dedupe } from '../utils/dedupe.js';
+import { dedupe } from '../../utils/dedupe.js';
+import { topologicalSort } from './topologicSort.js';
 
 export interface DataFlowCapability {
 	/**
@@ -67,95 +68,14 @@ export interface BatchExecution {
 	};
 }
 
-/**
- * Creates a dataflow capability for the graph
- */
-export const DataFlowCapabilityFactory: CapabilityFactory = {
-	name: 'dataFlow',
-	register: (graph: Graph) => {
-		const ctx = {
-			async update(nodeID: string, opts?: IUpdateOpts) {
-				const { noRecursive = false } = opts || {};
-
-				const node = graph.nodes[nodeID];
-				if (!node) {
-					throw new Error(`No node found with id ${nodeID}`);
-				}
-
-				const res = await (node as DataflowNode).dataflow?.run();
-				//Don't propagate if there is an error
-				if (res.error) {
-					return;
-				}
-
-				if (noRecursive) {
-					return;
-				}
-
-				await ctx.propagate(node.id);
-			},
-			async propagate(nodeId: string, oneShot: boolean = false) {
-				const node = graph.getNode(nodeId);
-				if (!node) {
-					return;
-				}
-				//Update all the outgoing edges
-				const outEdges = graph.outEdges(node.id);
-				/**
-				 * This is a heuristic to not attempt to update nodes that don't have a detected port at the end-
-				 */
-				const affectedNodes = outEdges
-					.map(edge => {
-						const output = node.outputs[edge.sourceHandle] as Output;
-
-						//It might be dynamic
-						if (!output || output.pType !== DATAFLOW_PORT) {
-							return;
-						}
-						const value = output.value;
-						//write the value to the input port of the target
-						const target = graph.getNode(edge.target);
-						if (!target) {
-							return;
-						}
-						const input = target.inputs[edge.targetHandle] as Input;
-						if (!input) {
-							return;
-						}
-
-						if (input.variadic) {
-							//Don't attempt mutation of the original array
-							const newVal = [...(input.value || [])];
-							newVal[edge.annotations[annotatedVariadicIndex]!] = output.value;
-							//Extend the variadic array
-							input.setValue(newVal, {
-								//We are controlling propagation
-								noPropagate: true
-							});
-						} else {
-							input.setValue(value, {
-								type: output.type,
-								//We are controlling propagation
-								noPropagate: true
-							});
-						}
-
-						return edge.target;
-					})
-					//Remove holes
-					.filter(Boolean) as string[];
 
-				if (!oneShot) {
-					//These are the nodes to be update
-					const nodes = dedupe(affectedNodes);
-					await Promise.all(nodes.map(x => ctx.update(x)));
-				}
-			}
-		} as DataFlowCapability;
+export class DataFlowGraph extends Graph {
 
-		graph.on('edgeRemoved', edge => {
+	constructor(input: IGraph) {
+		super(input);
+		this.on('edgeRemoved', edge => {
 			//Try get the node
-			const target = graph.getNode(edge.target);
+			const target = this.getNode(edge.target);
 
 			//No sidefffects when not a dataflow node
 			if (!(target as DataflowNode).dataflow) {
@@ -181,11 +101,11 @@ export const DataFlowCapabilityFactory: CapabilityFactory = {
 			}
 		});
 
-		graph.onFinalize('edgeAdded', edge => {
-			const targetNode = graph.getNode(edge.target);
+		this.onFinalize('edgeAdded', edge => {
+			const targetNode = this.getNode(edge.target);
 			//No sidefffects when not a dataflow node
 			if ((targetNode as DataflowNode).dataflow) {
-				const sourceNode = graph.getNode(edge.source);
+				const sourceNode = this.getNode(edge.source);
 				const targetPort = targetNode.inputs[edge.targetHandle] as Input;
 				const sourcePort = sourceNode.outputs[edge.sourceHandle] as Output;
 				if (targetPort.variadic) {
@@ -206,16 +126,86 @@ export const DataFlowCapabilityFactory: CapabilityFactory = {
 			}
 			return edge;
 		});
-		return ctx;
 	}
-};
 
-export type WithDataFlow = {
-	dataFlow: DataFlowCapability;
-};
+	async update(nodeID: string, opts?: IUpdateOpts) {
+		const { noRecursive = false } = opts || {};
+
+		const node = this.nodes[nodeID];
+		if (!node) {
+			throw new Error(`No node found with id ${nodeID}`);
+		}
+
+		const res = await (node as DataflowNode).dataflow?.run();
+		//Don't propagate if there is an error
+		if (res.error) {
+			return;
+		}
+
+		if (noRecursive) {
+			return;
+		}
+
+		await this.propagate(node.id);
+	}
+	async propagate(nodeId: string, oneShot: boolean = false) {
+		const node = this.getNode(nodeId);
+		if (!node) {
+			return;
+		}
+		//Update all the outgoing edges
+		const outEdges = this.outEdges(node.id);
+		/**
+		 * This is a heuristic to not attempt to update nodes that don't have a detected port at the end-
+		 */
+		const affectedNodes = outEdges
+			.map(edge => {
+				const output = node.outputs[edge.sourceHandle] as Output;
+
+				//It might be dynamic
+				if (!output || output.pType !== DATAFLOW_PORT) {
+					return;
+				}
+				const value = output.value;
+				//write the value to the input port of the target
+				const target = this.getNode(edge.target);
+				if (!target) {
+					return;
+				}
+				const input = target.inputs[edge.targetHandle] as Input;
+				if (!input) {
+					return;
+				}
 
+				if (input.variadic) {
+					//Don't attempt mutation of the original array
+					const newVal = [...(input.value || [])];
+					newVal[edge.annotations[annotatedVariadicIndex]!] = output.value;
+					//Extend the variadic array
+					input.setValue(newVal, {
+						//We are controlling propagation
+						noPropagate: true
+					});
+				} else {
+					input.setValue(value, {
+						type: output.type,
+						//We are controlling propagation
+						noPropagate: true
+					});
+				}
+
+				return edge.target;
+			})
+			//Remove holes
+			.filter(Boolean) as string[];
 
-export type DataflowGraph = ApplyCapabilities<Graph, [WithDataFlow]>;
+		if (!oneShot) {
+			//These are the nodes to be update
+			const nodes = dedupe(affectedNodes);
+			await Promise.all(nodes.map(x => this.update(x)));
+		}
+	}
+}
 
 /**
  * Executes the graph as a single batch. This will execute all the nodes in the graph and return the output of the output node
@@ -229,7 +219,7 @@ export type DataflowGraph = ApplyCapabilities<Graph, [WithDataFlow]>;
  * @returns
  */
 export const execute = async (
-	graph: DataflowGraph,
+	graph: DataFlowGraph,
 	opts?: GraphExecuteOptions
 ): Promise<BatchExecution> => {
 	if (!graph.capabilities.dataFlow) {
diff --git a/packages/graph-engine/src/nodes/.DS_Store b/packages/graph-engine/src/engines/dataflow/nodes/.DS_Store
similarity index 100%
rename from packages/graph-engine/src/nodes/.DS_Store
rename to packages/graph-engine/src/engines/dataflow/nodes/.DS_Store
diff --git a/packages/graph-engine/src/nodes/accessibility/colorBlindness.ts b/packages/graph-engine/src/engines/dataflow/nodes/accessibility/colorBlindness.ts
similarity index 97%
rename from packages/graph-engine/src/nodes/accessibility/colorBlindness.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/accessibility/colorBlindness.ts
index 088d05e0e..bc88ce020 100644
--- a/packages/graph-engine/src/nodes/accessibility/colorBlindness.ts
+++ b/packages/graph-engine/src/engines/dataflow/nodes/accessibility/colorBlindness.ts
@@ -8,7 +8,7 @@ import {
 	toHex
 } from '../../index.js';
 import { ColorSchema, StringSchema } from '../../schemas/index.js';
-import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
+import { DataflowNode } from '@/engines/dataflow/types/node.js';
 import blinder from 'color-blind-esm';
 
 export enum ColorBlindnessTypes {
diff --git a/packages/graph-engine/src/nodes/accessibility/index.ts b/packages/graph-engine/src/engines/dataflow/nodes/accessibility/index.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/accessibility/index.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/accessibility/index.ts
diff --git a/packages/graph-engine/src/engines/dataflow/nodes/accessibility/node.json b/packages/graph-engine/src/engines/dataflow/nodes/accessibility/node.json
new file mode 100644
index 000000000..65b1dd055
--- /dev/null
+++ b/packages/graph-engine/src/engines/dataflow/nodes/accessibility/node.json
@@ -0,0 +1,38 @@
+{
+    "summary":"Converts colors to perceived colors",
+    "description": "Converts provided colors to the colors as perceived by the specified color blindness type. The output is a hex color string. The color blindness types include protanopia, protanomaly, deuteranopia, deuteranomaly, tritanopia, tritanomaly, achromatopsia, and achromatomaly. The output is a hex color string.",
+    "title": "Color Blindness",
+    "type": "studio.tokens.accessibility.colorBlindness",
+    "inputs": [
+        {
+            "name":"color",
+            "description": "The color to convert",
+            "type": {
+                "name": "Color"
+            },
+            "requiredConnection": true
+        }
+    ],
+    "outputs": {
+        "value": {
+            "type": {
+                "channels": [
+                    0,
+                    0,
+                    0
+                ],
+                "space": "srgb"
+            }
+        }
+    },
+    "version": "1.0.0",
+    "changelog":[],
+    "licence": "MIT",
+    "author": {
+        "name": "SorsOps"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/tokens-studio/graph-engine"
+    }
+}
diff --git a/packages/graph-engine/src/nodes/array/arraySubgraph.ts b/packages/graph-engine/src/engines/dataflow/nodes/array/arraySubgraph.ts
similarity index 99%
rename from packages/graph-engine/src/nodes/array/arraySubgraph.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/array/arraySubgraph.ts
index 89c5290db..98a881ce9 100644
--- a/packages/graph-engine/src/nodes/array/arraySubgraph.ts
+++ b/packages/graph-engine/src/engines/dataflow/nodes/array/arraySubgraph.ts
@@ -4,7 +4,7 @@ import {
 	NumberSchema,
 	SchemaObject
 } from '../../schemas/index.js';
-import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
+import { DataflowNode } from '@/engines/dataflow/types/node.js';
 import { Graph } from '../../graph/graph.js';
 import { INodeDefinition } from '../../programmatic/nodes/node.js';
 import { Input, ToInput, ToOutput } from '../../programmatic/index.js';
diff --git a/packages/graph-engine/src/nodes/array/arrify.ts b/packages/graph-engine/src/engines/dataflow/nodes/array/arrify.ts
similarity index 93%
rename from packages/graph-engine/src/nodes/array/arrify.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/array/arrify.ts
index b33e4da67..664ed5728 100644
--- a/packages/graph-engine/src/nodes/array/arrify.ts
+++ b/packages/graph-engine/src/engines/dataflow/nodes/array/arrify.ts
@@ -3,7 +3,7 @@ import {
 	AnySchema,
 	createVariadicSchema
 } from '../../schemas/index.js';
-import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
+import { DataflowNode } from '@/engines/dataflow/types/node.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
 
 export default class NodeDefinition<T> extends DataflowNode {
diff --git a/packages/graph-engine/src/nodes/array/concat.ts b/packages/graph-engine/src/engines/dataflow/nodes/array/concat.ts
similarity index 94%
rename from packages/graph-engine/src/nodes/array/concat.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/array/concat.ts
index 9673318d3..de97383ee 100644
--- a/packages/graph-engine/src/nodes/array/concat.ts
+++ b/packages/graph-engine/src/engines/dataflow/nodes/array/concat.ts
@@ -1,5 +1,5 @@
 import { AnyArraySchema } from '../../schemas/index.js';
-import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
+import { DataflowNode } from '@/engines/dataflow/types/node.js';
 import { INodeDefinition } from '../../programmatic/nodes/node.js';
 import { ToInput, ToOutput } from '../../programmatic/index.js';
 export default class NodeDefinition<T> extends DataflowNode {
diff --git a/packages/graph-engine/src/nodes/array/filter.ts b/packages/graph-engine/src/engines/dataflow/nodes/array/filter.ts
similarity index 98%
rename from packages/graph-engine/src/nodes/array/filter.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/array/filter.ts
index 1a0ee11ea..874c730a8 100644
--- a/packages/graph-engine/src/nodes/array/filter.ts
+++ b/packages/graph-engine/src/engines/dataflow/nodes/array/filter.ts
@@ -4,7 +4,7 @@ import {
 	BooleanSchema,
 	NumberSchema
 } from '../../schemas/index.js';
-import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
+import { DataflowNode } from '@/engines/dataflow/types/node.js';
 import { Graph } from '../../graph/graph.js';
 import { INodeDefinition } from '../../programmatic/nodes/node.js';
 import { Input, ToInput, ToOutput } from '../../programmatic/index.js';
diff --git a/packages/graph-engine/src/nodes/array/find.ts b/packages/graph-engine/src/engines/dataflow/nodes/array/find.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/array/find.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/array/find.ts
diff --git a/packages/graph-engine/src/nodes/array/flatten.ts b/packages/graph-engine/src/engines/dataflow/nodes/array/flatten.ts
similarity index 94%
rename from packages/graph-engine/src/nodes/array/flatten.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/array/flatten.ts
index dd9b18d95..9628a4b9f 100644
--- a/packages/graph-engine/src/nodes/array/flatten.ts
+++ b/packages/graph-engine/src/engines/dataflow/nodes/array/flatten.ts
@@ -1,5 +1,5 @@
 import { AnyArraySchema } from '../../schemas/index.js';
-import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
+import { DataflowNode } from '@/engines/dataflow/types/node.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
 export default class NodeDefinition<T> extends DataflowNode {
 	static title = 'Array flatten';
diff --git a/packages/graph-engine/src/nodes/array/index.ts b/packages/graph-engine/src/engines/dataflow/nodes/array/index.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/array/index.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/array/index.ts
diff --git a/packages/graph-engine/src/nodes/array/indexArray.ts b/packages/graph-engine/src/engines/dataflow/nodes/array/indexArray.ts
similarity index 95%
rename from packages/graph-engine/src/nodes/array/indexArray.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/array/indexArray.ts
index 56dd9ad71..1006bd940 100644
--- a/packages/graph-engine/src/nodes/array/indexArray.ts
+++ b/packages/graph-engine/src/engines/dataflow/nodes/array/indexArray.ts
@@ -3,7 +3,7 @@ import {
 	AnySchema,
 	NumberSchema
 } from '../../schemas/index.js';
-import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
+import { DataflowNode } from '@/engines/dataflow/types/node.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
 import { SchemaObject } from 'ajv';
 export default class NodeDefinition<T> extends DataflowNode {
diff --git a/packages/graph-engine/src/nodes/array/inject.ts b/packages/graph-engine/src/engines/dataflow/nodes/array/inject.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/array/inject.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/array/inject.ts
diff --git a/packages/graph-engine/src/nodes/array/length.ts b/packages/graph-engine/src/engines/dataflow/nodes/array/length.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/array/length.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/array/length.ts
diff --git a/packages/graph-engine/src/nodes/array/push.ts b/packages/graph-engine/src/engines/dataflow/nodes/array/push.ts
similarity index 94%
rename from packages/graph-engine/src/nodes/array/push.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/array/push.ts
index 143422b25..75eb22df1 100644
--- a/packages/graph-engine/src/nodes/array/push.ts
+++ b/packages/graph-engine/src/engines/dataflow/nodes/array/push.ts
@@ -1,5 +1,5 @@
 import { AnyArraySchema, AnySchema } from '../../schemas/index.js';
-import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
+import { DataflowNode } from '@/engines/dataflow/types/node.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
 export default class NodeDefinition<T> extends DataflowNode {
 	static title = 'Array push';
diff --git a/packages/graph-engine/src/nodes/array/remove.ts b/packages/graph-engine/src/engines/dataflow/nodes/array/remove.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/array/remove.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/array/remove.ts
diff --git a/packages/graph-engine/src/nodes/array/replace.ts b/packages/graph-engine/src/engines/dataflow/nodes/array/replace.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/array/replace.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/array/replace.ts
diff --git a/packages/graph-engine/src/nodes/array/reverse.ts b/packages/graph-engine/src/engines/dataflow/nodes/array/reverse.ts
similarity index 93%
rename from packages/graph-engine/src/nodes/array/reverse.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/array/reverse.ts
index a396bddb2..aa5c2776e 100644
--- a/packages/graph-engine/src/nodes/array/reverse.ts
+++ b/packages/graph-engine/src/engines/dataflow/nodes/array/reverse.ts
@@ -1,5 +1,5 @@
 import { AnyArraySchema } from '../../schemas/index.js';
-import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
+import { DataflowNode } from '@/engines/dataflow/types/node.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
 export default class NodeDefinition<T> extends DataflowNode {
 	static title = 'Reverse Array';
diff --git a/packages/graph-engine/src/nodes/array/slice.ts b/packages/graph-engine/src/engines/dataflow/nodes/array/slice.ts
similarity index 93%
rename from packages/graph-engine/src/nodes/array/slice.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/array/slice.ts
index a98111302..6ef0eb9a0 100644
--- a/packages/graph-engine/src/nodes/array/slice.ts
+++ b/packages/graph-engine/src/engines/dataflow/nodes/array/slice.ts
@@ -1,5 +1,5 @@
 import { AnyArraySchema, NumberSchema } from '../../schemas/index.js';
-import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
+import { DataflowNode } from '@/engines/dataflow/types/node.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
 export default class NodeDefinition<T> extends DataflowNode {
 	static title = 'Slice Array';
diff --git a/packages/graph-engine/src/nodes/array/sort.ts b/packages/graph-engine/src/engines/dataflow/nodes/array/sort.ts
similarity index 95%
rename from packages/graph-engine/src/nodes/array/sort.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/array/sort.ts
index aeb99eb3d..58dbdc96a 100644
--- a/packages/graph-engine/src/nodes/array/sort.ts
+++ b/packages/graph-engine/src/engines/dataflow/nodes/array/sort.ts
@@ -1,5 +1,5 @@
 import { AnyArraySchema, StringSchema } from '../../schemas/index.js';
-import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
+import { DataflowNode } from '@/engines/dataflow/types/node.js';
 import { INodeDefinition } from '../../programmatic/nodes/node.js';
 import { ToInput, ToOutput } from '../../programmatic/index.js';
 import { orderBy } from 'lodash-es';
diff --git a/packages/graph-engine/src/nodes/color/colorToString.ts b/packages/graph-engine/src/engines/dataflow/nodes/color/colorToString.ts
similarity index 95%
rename from packages/graph-engine/src/nodes/color/colorToString.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/color/colorToString.ts
index 445c77502..9c7756646 100644
--- a/packages/graph-engine/src/nodes/color/colorToString.ts
+++ b/packages/graph-engine/src/engines/dataflow/nodes/color/colorToString.ts
@@ -1,7 +1,7 @@
 import { Black, toColor } from './lib/utils.js';
 import { Color } from '../../types.js';
 import { ColorSchema, StringSchema } from '../../schemas/index.js';
-import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
+import { DataflowNode } from '@/engines/dataflow/types/node.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
 
 export default class NodeDefinition extends DataflowNode {
diff --git a/packages/graph-engine/src/nodes/color/contrast.ts b/packages/graph-engine/src/engines/dataflow/nodes/color/contrast.ts
similarity index 96%
rename from packages/graph-engine/src/nodes/color/contrast.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/color/contrast.ts
index 8e53812c4..1e7200dc8 100644
--- a/packages/graph-engine/src/nodes/color/contrast.ts
+++ b/packages/graph-engine/src/engines/dataflow/nodes/color/contrast.ts
@@ -5,7 +5,7 @@ import {
 	StringSchema
 } from '../../schemas/index.js';
 import { ContrastAlgorithm } from '../../types/index.js';
-import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
+import { DataflowNode } from '@/engines/dataflow/types/node.js';
 import { INodeDefinition } from '../../index.js';
 import { toColor } from './lib/utils.js';
 
diff --git a/packages/graph-engine/src/nodes/color/contrasting.ts b/packages/graph-engine/src/engines/dataflow/nodes/color/contrasting.ts
similarity index 97%
rename from packages/graph-engine/src/nodes/color/contrasting.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/color/contrasting.ts
index fdd42f30a..53a063608 100644
--- a/packages/graph-engine/src/nodes/color/contrasting.ts
+++ b/packages/graph-engine/src/engines/dataflow/nodes/color/contrasting.ts
@@ -7,7 +7,7 @@ import {
 } from '../../schemas/index.js';
 import { Color as ColorType } from '../../types.js';
 import { ContrastAlgorithm } from '../../types/index.js';
-import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
+import { DataflowNode } from '@/engines/dataflow/types/node.js';
 import { INodeDefinition } from '../../programmatic/nodes/node.js';
 import { ToInput, ToOutput } from '../../programmatic/index.js';
 
diff --git a/packages/graph-engine/src/nodes/color/contrastingAlpha.ts b/packages/graph-engine/src/engines/dataflow/nodes/color/contrastingAlpha.ts
similarity index 98%
rename from packages/graph-engine/src/nodes/color/contrastingAlpha.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/color/contrastingAlpha.ts
index 42b44004b..0a0d8d68a 100644
--- a/packages/graph-engine/src/nodes/color/contrastingAlpha.ts
+++ b/packages/graph-engine/src/engines/dataflow/nodes/color/contrastingAlpha.ts
@@ -6,7 +6,7 @@ import {
 } from '../../schemas/index.js';
 import { Color as ColorType, ContrastAlgorithmType } from '../../types.js';
 import { ContrastAlgorithm } from '../../types/index.js';
-import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
+import { DataflowNode } from '@/engines/dataflow/types/node.js';
 import { INodeDefinition } from '../../programmatic/nodes/node.js';
 import { ToInput, ToOutput } from '@/programmatic/index.js';
 import { flattenAlpha } from './lib/flattenAlpha.js';
diff --git a/packages/graph-engine/src/nodes/color/convert.ts b/packages/graph-engine/src/engines/dataflow/nodes/color/convert.ts
similarity index 95%
rename from packages/graph-engine/src/nodes/color/convert.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/color/convert.ts
index 34972fabf..1bbdec97c 100644
--- a/packages/graph-engine/src/nodes/color/convert.ts
+++ b/packages/graph-engine/src/engines/dataflow/nodes/color/convert.ts
@@ -1,7 +1,7 @@
 import { Color } from '../../types.js';
 import { ColorSchema, StringSchema } from '../../schemas/index.js';
 import { ColorSpace, colorSpaces } from './lib/types.js';
-import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
+import { DataflowNode } from '@/engines/dataflow/types/node.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
 import { toColor, toColorObject } from './lib/utils.js';
 
diff --git a/packages/graph-engine/src/nodes/color/create.ts b/packages/graph-engine/src/engines/dataflow/nodes/color/create.ts
similarity index 96%
rename from packages/graph-engine/src/nodes/color/create.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/color/create.ts
index 9fd94726f..d331f9765 100644
--- a/packages/graph-engine/src/nodes/color/create.ts
+++ b/packages/graph-engine/src/engines/dataflow/nodes/color/create.ts
@@ -4,7 +4,7 @@ import {
 	NumberSchema,
 	StringSchema
 } from '../../schemas/index.js';
-import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
+import { DataflowNode } from '@/engines/dataflow/types/node.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
 export { ColorModifierTypes } from '@tokens-studio/types';
 import { ColorSpace, colorSpaces } from './lib/types.js';
diff --git a/packages/graph-engine/src/nodes/color/darken.ts b/packages/graph-engine/src/engines/dataflow/nodes/color/darken.ts
similarity index 95%
rename from packages/graph-engine/src/nodes/color/darken.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/color/darken.ts
index 76754f33d..be99d91a9 100644
--- a/packages/graph-engine/src/nodes/color/darken.ts
+++ b/packages/graph-engine/src/engines/dataflow/nodes/color/darken.ts
@@ -1,7 +1,7 @@
 import { ColorSchema, NumberSchema } from '../../schemas/index.js';
 import { ColorSpace } from './lib/types.js';
 import { Color as ColorType } from '../../types.js';
-import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
+import { DataflowNode } from '@/engines/dataflow/types/node.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
 import { White, toColor, toColorObject } from './lib/utils.js';
 
diff --git a/packages/graph-engine/src/nodes/color/deconstruct.ts b/packages/graph-engine/src/engines/dataflow/nodes/color/deconstruct.ts
similarity index 96%
rename from packages/graph-engine/src/nodes/color/deconstruct.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/color/deconstruct.ts
index 7ba056f24..67f6c9742 100644
--- a/packages/graph-engine/src/nodes/color/deconstruct.ts
+++ b/packages/graph-engine/src/engines/dataflow/nodes/color/deconstruct.ts
@@ -5,7 +5,7 @@ import {
 	StringSchema
 } from '../../schemas/index.js';
 import { ColorSpace } from './lib/types.js';
-import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
+import { DataflowNode } from '@/engines/dataflow/types/node.js';
 import { INodeDefinition, ToInput, ToOutput } from '../../index.js';
 
 export default class DestructColorNode extends DataflowNode {
diff --git a/packages/graph-engine/src/nodes/color/deltaE.ts b/packages/graph-engine/src/engines/dataflow/nodes/color/deltaE.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/color/deltaE.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/color/deltaE.ts
diff --git a/packages/graph-engine/src/nodes/color/distance.ts b/packages/graph-engine/src/engines/dataflow/nodes/color/distance.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/color/distance.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/color/distance.ts
diff --git a/packages/graph-engine/src/nodes/color/flattenAlpha.ts b/packages/graph-engine/src/engines/dataflow/nodes/color/flattenAlpha.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/color/flattenAlpha.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/color/flattenAlpha.ts
diff --git a/packages/graph-engine/src/nodes/color/index.ts b/packages/graph-engine/src/engines/dataflow/nodes/color/index.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/color/index.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/color/index.ts
diff --git a/packages/graph-engine/src/nodes/color/lib/flattenAlpha.ts b/packages/graph-engine/src/engines/dataflow/nodes/color/lib/flattenAlpha.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/color/lib/flattenAlpha.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/color/lib/flattenAlpha.ts
diff --git a/packages/graph-engine/src/nodes/color/lib/sortColors.ts b/packages/graph-engine/src/engines/dataflow/nodes/color/lib/sortColors.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/color/lib/sortColors.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/color/lib/sortColors.ts
diff --git a/packages/graph-engine/src/nodes/color/lib/spaces.ts b/packages/graph-engine/src/engines/dataflow/nodes/color/lib/spaces.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/color/lib/spaces.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/color/lib/spaces.ts
diff --git a/packages/graph-engine/src/nodes/color/lib/transparentize.ts b/packages/graph-engine/src/engines/dataflow/nodes/color/lib/transparentize.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/color/lib/transparentize.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/color/lib/transparentize.ts
diff --git a/packages/graph-engine/src/nodes/color/lib/utils.ts b/packages/graph-engine/src/engines/dataflow/nodes/color/lib/utils.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/color/lib/utils.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/color/lib/utils.ts
diff --git a/packages/graph-engine/src/nodes/color/lighten.ts b/packages/graph-engine/src/engines/dataflow/nodes/color/lighten.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/color/lighten.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/color/lighten.ts
diff --git a/packages/graph-engine/src/nodes/color/matchAlpha.ts b/packages/graph-engine/src/engines/dataflow/nodes/color/matchAlpha.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/color/matchAlpha.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/color/matchAlpha.ts
diff --git a/packages/graph-engine/src/nodes/color/mix.ts b/packages/graph-engine/src/engines/dataflow/nodes/color/mix.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/color/mix.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/color/mix.ts
diff --git a/packages/graph-engine/src/nodes/color/name.ts b/packages/graph-engine/src/engines/dataflow/nodes/color/name.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/color/name.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/color/name.ts
diff --git a/packages/graph-engine/src/nodes/color/poline.ts b/packages/graph-engine/src/engines/dataflow/nodes/color/poline.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/color/poline.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/color/poline.ts
diff --git a/packages/graph-engine/src/nodes/color/range.ts b/packages/graph-engine/src/engines/dataflow/nodes/color/range.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/color/range.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/color/range.ts
diff --git a/packages/graph-engine/src/nodes/color/scale.ts b/packages/graph-engine/src/engines/dataflow/nodes/color/scale.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/color/scale.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/color/scale.ts
diff --git a/packages/graph-engine/src/nodes/color/sortByDistance.ts b/packages/graph-engine/src/engines/dataflow/nodes/color/sortByDistance.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/color/sortByDistance.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/color/sortByDistance.ts
diff --git a/packages/graph-engine/src/nodes/color/stringToColor.ts b/packages/graph-engine/src/engines/dataflow/nodes/color/stringToColor.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/color/stringToColor.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/color/stringToColor.ts
diff --git a/packages/graph-engine/src/nodes/color/wheel.ts b/packages/graph-engine/src/engines/dataflow/nodes/color/wheel.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/color/wheel.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/color/wheel.ts
diff --git a/packages/graph-engine/src/nodes/css/accessibleClamp.ts b/packages/graph-engine/src/engines/dataflow/nodes/css/accessibleClamp.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/css/accessibleClamp.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/css/accessibleClamp.ts
diff --git a/packages/graph-engine/src/nodes/css/box.ts b/packages/graph-engine/src/engines/dataflow/nodes/css/box.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/css/box.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/css/box.ts
diff --git a/packages/graph-engine/src/nodes/css/cssFunction.ts b/packages/graph-engine/src/engines/dataflow/nodes/css/cssFunction.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/css/cssFunction.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/css/cssFunction.ts
diff --git a/packages/graph-engine/src/nodes/css/index.ts b/packages/graph-engine/src/engines/dataflow/nodes/css/index.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/css/index.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/css/index.ts
diff --git a/packages/graph-engine/src/nodes/css/map.ts b/packages/graph-engine/src/engines/dataflow/nodes/css/map.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/css/map.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/css/map.ts
diff --git a/packages/graph-engine/src/nodes/curves/bezier.ts b/packages/graph-engine/src/engines/dataflow/nodes/curves/bezier.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/curves/bezier.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/curves/bezier.ts
diff --git a/packages/graph-engine/src/nodes/curves/constructFloatCurve.ts b/packages/graph-engine/src/engines/dataflow/nodes/curves/constructFloatCurve.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/curves/constructFloatCurve.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/curves/constructFloatCurve.ts
diff --git a/packages/graph-engine/src/nodes/curves/deconstructFloatCurve.ts b/packages/graph-engine/src/engines/dataflow/nodes/curves/deconstructFloatCurve.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/curves/deconstructFloatCurve.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/curves/deconstructFloatCurve.ts
diff --git a/packages/graph-engine/src/nodes/curves/flipFloatCurve.ts b/packages/graph-engine/src/engines/dataflow/nodes/curves/flipFloatCurve.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/curves/flipFloatCurve.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/curves/flipFloatCurve.ts
diff --git a/packages/graph-engine/src/nodes/curves/floatCurve.ts b/packages/graph-engine/src/engines/dataflow/nodes/curves/floatCurve.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/curves/floatCurve.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/curves/floatCurve.ts
diff --git a/packages/graph-engine/src/nodes/curves/index.ts b/packages/graph-engine/src/engines/dataflow/nodes/curves/index.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/curves/index.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/curves/index.ts
diff --git a/packages/graph-engine/src/nodes/curves/presetBeziers.ts b/packages/graph-engine/src/engines/dataflow/nodes/curves/presetBeziers.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/curves/presetBeziers.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/curves/presetBeziers.ts
diff --git a/packages/graph-engine/src/nodes/curves/sample.ts b/packages/graph-engine/src/engines/dataflow/nodes/curves/sample.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/curves/sample.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/curves/sample.ts
diff --git a/packages/graph-engine/src/nodes/curves/sampleFloatCurve.ts b/packages/graph-engine/src/engines/dataflow/nodes/curves/sampleFloatCurve.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/curves/sampleFloatCurve.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/curves/sampleFloatCurve.ts
diff --git a/packages/graph-engine/src/nodes/generic/constant.ts b/packages/graph-engine/src/engines/dataflow/nodes/generic/constant.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/generic/constant.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/generic/constant.ts
diff --git a/packages/graph-engine/src/nodes/generic/index.ts b/packages/graph-engine/src/engines/dataflow/nodes/generic/index.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/generic/index.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/generic/index.ts
diff --git a/packages/graph-engine/src/nodes/generic/input.ts b/packages/graph-engine/src/engines/dataflow/nodes/generic/input.ts
similarity index 98%
rename from packages/graph-engine/src/nodes/generic/input.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/generic/input.ts
index 6d451a08b..7a22b422e 100644
--- a/packages/graph-engine/src/nodes/generic/input.ts
+++ b/packages/graph-engine/src/engines/dataflow/nodes/generic/input.ts
@@ -1,5 +1,5 @@
 import { DataFlowPort } from '@/programmatic/dataflow/base.js';
-import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
+import { DataflowNode } from '@/engines/dataflow/types/node.js';
 import { IDeserializeOpts } from '../../graph/types.js';
 import { INodeDefinition } from '../../programmatic/nodes/node.js';
 import {
diff --git a/packages/graph-engine/src/nodes/generic/note.ts b/packages/graph-engine/src/engines/dataflow/nodes/generic/note.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/generic/note.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/generic/note.ts
diff --git a/packages/graph-engine/src/nodes/generic/objectMerge.ts b/packages/graph-engine/src/engines/dataflow/nodes/generic/objectMerge.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/generic/objectMerge.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/generic/objectMerge.ts
diff --git a/packages/graph-engine/src/nodes/generic/objectProperty.ts b/packages/graph-engine/src/engines/dataflow/nodes/generic/objectProperty.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/generic/objectProperty.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/generic/objectProperty.ts
diff --git a/packages/graph-engine/src/nodes/generic/objectify.ts b/packages/graph-engine/src/engines/dataflow/nodes/generic/objectify.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/generic/objectify.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/generic/objectify.ts
diff --git a/packages/graph-engine/src/nodes/generic/output.ts b/packages/graph-engine/src/engines/dataflow/nodes/generic/output.ts
similarity index 96%
rename from packages/graph-engine/src/nodes/generic/output.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/generic/output.ts
index 15c01010e..7e4f97bfc 100644
--- a/packages/graph-engine/src/nodes/generic/output.ts
+++ b/packages/graph-engine/src/engines/dataflow/nodes/generic/output.ts
@@ -1,5 +1,5 @@
 import { DataFlowPort } from '@/programmatic/dataflow/base.js';
-import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
+import { DataflowNode } from '@/engines/dataflow/types/node.js';
 import { IDeserializeOpts } from '../../graph/types.js';
 import { INodeDefinition } from '../../programmatic/nodes/node.js';
 import {
diff --git a/packages/graph-engine/src/nodes/generic/panic.ts b/packages/graph-engine/src/engines/dataflow/nodes/generic/panic.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/generic/panic.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/generic/panic.ts
diff --git a/packages/graph-engine/src/nodes/generic/passthrough.ts b/packages/graph-engine/src/engines/dataflow/nodes/generic/passthrough.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/generic/passthrough.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/generic/passthrough.ts
diff --git a/packages/graph-engine/src/nodes/generic/subgraph.ts b/packages/graph-engine/src/engines/dataflow/nodes/generic/subgraph.ts
similarity index 98%
rename from packages/graph-engine/src/nodes/generic/subgraph.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/generic/subgraph.ts
index f422af5e2..2fa919705 100644
--- a/packages/graph-engine/src/nodes/generic/subgraph.ts
+++ b/packages/graph-engine/src/engines/dataflow/nodes/generic/subgraph.ts
@@ -6,7 +6,7 @@ import {
 	SerializedNode
 } from '../../graph/types.js';
 import { INodeDefinition } from '../../programmatic/nodes/node.js';
-import { WithDataFlow } from '@/capabilities/dataflow.js';
+import { WithDataFlow } from '@/engines/dataflow/index.js';
 import {
 	annotatedDeleteable,
 	hideFromParentSubgraph
diff --git a/packages/graph-engine/src/engines/dataflow/nodes/generic/testDraw.ts b/packages/graph-engine/src/engines/dataflow/nodes/generic/testDraw.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/graph-engine/src/nodes/gradient/gradientStop.ts b/packages/graph-engine/src/engines/dataflow/nodes/gradient/gradientStop.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/gradient/gradientStop.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/gradient/gradientStop.ts
diff --git a/packages/graph-engine/src/nodes/gradient/index.ts b/packages/graph-engine/src/engines/dataflow/nodes/gradient/index.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/gradient/index.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/gradient/index.ts
diff --git a/packages/graph-engine/src/nodes/index.ts b/packages/graph-engine/src/engines/dataflow/nodes/index.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/index.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/index.ts
diff --git a/packages/graph-engine/src/nodes/logic/and.ts b/packages/graph-engine/src/engines/dataflow/nodes/logic/and.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/logic/and.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/logic/and.ts
diff --git a/packages/graph-engine/src/nodes/logic/compare.ts b/packages/graph-engine/src/engines/dataflow/nodes/logic/compare.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/logic/compare.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/logic/compare.ts
diff --git a/packages/graph-engine/src/nodes/logic/if.ts b/packages/graph-engine/src/engines/dataflow/nodes/logic/if.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/logic/if.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/logic/if.ts
diff --git a/packages/graph-engine/src/nodes/logic/index.ts b/packages/graph-engine/src/engines/dataflow/nodes/logic/index.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/logic/index.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/logic/index.ts
diff --git a/packages/graph-engine/src/nodes/logic/not.ts b/packages/graph-engine/src/engines/dataflow/nodes/logic/not.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/logic/not.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/logic/not.ts
diff --git a/packages/graph-engine/src/nodes/logic/or.ts b/packages/graph-engine/src/engines/dataflow/nodes/logic/or.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/logic/or.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/logic/or.ts
diff --git a/packages/graph-engine/src/nodes/logic/switch.ts b/packages/graph-engine/src/engines/dataflow/nodes/logic/switch.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/logic/switch.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/logic/switch.ts
diff --git a/packages/graph-engine/src/nodes/math/abs.ts b/packages/graph-engine/src/engines/dataflow/nodes/math/abs.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/math/abs.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/math/abs.ts
diff --git a/packages/graph-engine/src/nodes/math/add.ts b/packages/graph-engine/src/engines/dataflow/nodes/math/add.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/math/add.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/math/add.ts
diff --git a/packages/graph-engine/src/nodes/math/addVariadic.ts b/packages/graph-engine/src/engines/dataflow/nodes/math/addVariadic.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/math/addVariadic.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/math/addVariadic.ts
diff --git a/packages/graph-engine/src/nodes/math/ceil.ts b/packages/graph-engine/src/engines/dataflow/nodes/math/ceil.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/math/ceil.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/math/ceil.ts
diff --git a/packages/graph-engine/src/nodes/math/clamp.ts b/packages/graph-engine/src/engines/dataflow/nodes/math/clamp.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/math/clamp.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/math/clamp.ts
diff --git a/packages/graph-engine/src/nodes/math/closestNumber.ts b/packages/graph-engine/src/engines/dataflow/nodes/math/closestNumber.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/math/closestNumber.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/math/closestNumber.ts
diff --git a/packages/graph-engine/src/nodes/math/cos.ts b/packages/graph-engine/src/engines/dataflow/nodes/math/cos.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/math/cos.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/math/cos.ts
diff --git a/packages/graph-engine/src/nodes/math/count.ts b/packages/graph-engine/src/engines/dataflow/nodes/math/count.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/math/count.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/math/count.ts
diff --git a/packages/graph-engine/src/nodes/math/difference.ts b/packages/graph-engine/src/engines/dataflow/nodes/math/difference.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/math/difference.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/math/difference.ts
diff --git a/packages/graph-engine/src/nodes/math/divide.ts b/packages/graph-engine/src/engines/dataflow/nodes/math/divide.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/math/divide.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/math/divide.ts
diff --git a/packages/graph-engine/src/nodes/math/divideVariadic.ts b/packages/graph-engine/src/engines/dataflow/nodes/math/divideVariadic.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/math/divideVariadic.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/math/divideVariadic.ts
diff --git a/packages/graph-engine/src/nodes/math/eval.ts b/packages/graph-engine/src/engines/dataflow/nodes/math/eval.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/math/eval.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/math/eval.ts
diff --git a/packages/graph-engine/src/nodes/math/exp.ts b/packages/graph-engine/src/engines/dataflow/nodes/math/exp.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/math/exp.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/math/exp.ts
diff --git a/packages/graph-engine/src/nodes/math/floor.ts b/packages/graph-engine/src/engines/dataflow/nodes/math/floor.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/math/floor.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/math/floor.ts
diff --git a/packages/graph-engine/src/nodes/math/fluid.ts b/packages/graph-engine/src/engines/dataflow/nodes/math/fluid.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/math/fluid.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/math/fluid.ts
diff --git a/packages/graph-engine/src/nodes/math/index.ts b/packages/graph-engine/src/engines/dataflow/nodes/math/index.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/math/index.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/math/index.ts
diff --git a/packages/graph-engine/src/nodes/math/lerp.ts b/packages/graph-engine/src/engines/dataflow/nodes/math/lerp.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/math/lerp.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/math/lerp.ts
diff --git a/packages/graph-engine/src/nodes/math/mod.ts b/packages/graph-engine/src/engines/dataflow/nodes/math/mod.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/math/mod.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/math/mod.ts
diff --git a/packages/graph-engine/src/nodes/math/multiply.ts b/packages/graph-engine/src/engines/dataflow/nodes/math/multiply.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/math/multiply.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/math/multiply.ts
diff --git a/packages/graph-engine/src/nodes/math/multiplyVariadic.ts b/packages/graph-engine/src/engines/dataflow/nodes/math/multiplyVariadic.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/math/multiplyVariadic.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/math/multiplyVariadic.ts
diff --git a/packages/graph-engine/src/nodes/math/pow.ts b/packages/graph-engine/src/engines/dataflow/nodes/math/pow.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/math/pow.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/math/pow.ts
diff --git a/packages/graph-engine/src/nodes/math/random.ts b/packages/graph-engine/src/engines/dataflow/nodes/math/random.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/math/random.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/math/random.ts
diff --git a/packages/graph-engine/src/nodes/math/rangeMapping.ts b/packages/graph-engine/src/engines/dataflow/nodes/math/rangeMapping.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/math/rangeMapping.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/math/rangeMapping.ts
diff --git a/packages/graph-engine/src/nodes/math/round.ts b/packages/graph-engine/src/engines/dataflow/nodes/math/round.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/math/round.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/math/round.ts
diff --git a/packages/graph-engine/src/nodes/math/sin.ts b/packages/graph-engine/src/engines/dataflow/nodes/math/sin.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/math/sin.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/math/sin.ts
diff --git a/packages/graph-engine/src/nodes/math/snap.ts b/packages/graph-engine/src/engines/dataflow/nodes/math/snap.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/math/snap.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/math/snap.ts
diff --git a/packages/graph-engine/src/nodes/math/sqrt.ts b/packages/graph-engine/src/engines/dataflow/nodes/math/sqrt.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/math/sqrt.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/math/sqrt.ts
diff --git a/packages/graph-engine/src/nodes/math/subtract.ts b/packages/graph-engine/src/engines/dataflow/nodes/math/subtract.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/math/subtract.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/math/subtract.ts
diff --git a/packages/graph-engine/src/nodes/math/subtractVariadic.ts b/packages/graph-engine/src/engines/dataflow/nodes/math/subtractVariadic.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/math/subtractVariadic.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/math/subtractVariadic.ts
diff --git a/packages/graph-engine/src/nodes/math/tan.ts b/packages/graph-engine/src/engines/dataflow/nodes/math/tan.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/math/tan.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/math/tan.ts
diff --git a/packages/graph-engine/src/nodes/preview/colorCompare.ts b/packages/graph-engine/src/engines/dataflow/nodes/preview/colorCompare.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/preview/colorCompare.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/preview/colorCompare.ts
diff --git a/packages/graph-engine/src/nodes/preview/colorScale.ts b/packages/graph-engine/src/engines/dataflow/nodes/preview/colorScale.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/preview/colorScale.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/preview/colorScale.ts
diff --git a/packages/graph-engine/src/nodes/preview/curve.ts b/packages/graph-engine/src/engines/dataflow/nodes/preview/curve.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/preview/curve.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/preview/curve.ts
diff --git a/packages/graph-engine/src/nodes/preview/index.ts b/packages/graph-engine/src/engines/dataflow/nodes/preview/index.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/preview/index.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/preview/index.ts
diff --git a/packages/graph-engine/src/nodes/preview/mathExpression.ts b/packages/graph-engine/src/engines/dataflow/nodes/preview/mathExpression.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/preview/mathExpression.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/preview/mathExpression.ts
diff --git a/packages/graph-engine/src/nodes/preview/number.ts b/packages/graph-engine/src/engines/dataflow/nodes/preview/number.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/preview/number.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/preview/number.ts
diff --git a/packages/graph-engine/src/nodes/preview/swatch.ts b/packages/graph-engine/src/engines/dataflow/nodes/preview/swatch.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/preview/swatch.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/preview/swatch.ts
diff --git a/packages/graph-engine/src/nodes/search/findFirst.ts b/packages/graph-engine/src/engines/dataflow/nodes/search/findFirst.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/search/findFirst.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/search/findFirst.ts
diff --git a/packages/graph-engine/src/nodes/search/index.ts b/packages/graph-engine/src/engines/dataflow/nodes/search/index.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/search/index.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/search/index.ts
diff --git a/packages/graph-engine/src/nodes/search/linear.ts b/packages/graph-engine/src/engines/dataflow/nodes/search/linear.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/search/linear.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/search/linear.ts
diff --git a/packages/graph-engine/src/nodes/secret/index.ts b/packages/graph-engine/src/engines/dataflow/nodes/secret/index.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/secret/index.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/secret/index.ts
diff --git a/packages/graph-engine/src/nodes/secret/retrieve.ts b/packages/graph-engine/src/engines/dataflow/nodes/secret/retrieve.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/secret/retrieve.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/secret/retrieve.ts
diff --git a/packages/graph-engine/src/nodes/series/alternating.ts b/packages/graph-engine/src/engines/dataflow/nodes/series/alternating.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/series/alternating.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/series/alternating.ts
diff --git a/packages/graph-engine/src/nodes/series/arithmetic.ts b/packages/graph-engine/src/engines/dataflow/nodes/series/arithmetic.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/series/arithmetic.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/series/arithmetic.ts
diff --git a/packages/graph-engine/src/nodes/series/exponentialDecay.ts b/packages/graph-engine/src/engines/dataflow/nodes/series/exponentialDecay.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/series/exponentialDecay.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/series/exponentialDecay.ts
diff --git a/packages/graph-engine/src/nodes/series/fibonacci.ts b/packages/graph-engine/src/engines/dataflow/nodes/series/fibonacci.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/series/fibonacci.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/series/fibonacci.ts
diff --git a/packages/graph-engine/src/nodes/series/geometric.ts b/packages/graph-engine/src/engines/dataflow/nodes/series/geometric.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/series/geometric.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/series/geometric.ts
diff --git a/packages/graph-engine/src/nodes/series/harmonic.ts b/packages/graph-engine/src/engines/dataflow/nodes/series/harmonic.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/series/harmonic.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/series/harmonic.ts
diff --git a/packages/graph-engine/src/nodes/series/index.ts b/packages/graph-engine/src/engines/dataflow/nodes/series/index.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/series/index.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/series/index.ts
diff --git a/packages/graph-engine/src/nodes/series/inverseLinear.ts b/packages/graph-engine/src/engines/dataflow/nodes/series/inverseLinear.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/series/inverseLinear.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/series/inverseLinear.ts
diff --git a/packages/graph-engine/src/nodes/series/linear.ts b/packages/graph-engine/src/engines/dataflow/nodes/series/linear.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/series/linear.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/series/linear.ts
diff --git a/packages/graph-engine/src/nodes/series/power.ts b/packages/graph-engine/src/engines/dataflow/nodes/series/power.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/series/power.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/series/power.ts
diff --git a/packages/graph-engine/src/nodes/string/case.ts b/packages/graph-engine/src/engines/dataflow/nodes/string/case.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/string/case.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/string/case.ts
diff --git a/packages/graph-engine/src/nodes/string/index.ts b/packages/graph-engine/src/engines/dataflow/nodes/string/index.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/string/index.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/string/index.ts
diff --git a/packages/graph-engine/src/nodes/string/interpolate.ts b/packages/graph-engine/src/engines/dataflow/nodes/string/interpolate.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/string/interpolate.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/string/interpolate.ts
diff --git a/packages/graph-engine/src/nodes/string/join.ts b/packages/graph-engine/src/engines/dataflow/nodes/string/join.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/string/join.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/string/join.ts
diff --git a/packages/graph-engine/src/nodes/string/lowercase.ts b/packages/graph-engine/src/engines/dataflow/nodes/string/lowercase.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/string/lowercase.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/string/lowercase.ts
diff --git a/packages/graph-engine/src/nodes/string/normalize.ts b/packages/graph-engine/src/engines/dataflow/nodes/string/normalize.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/string/normalize.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/string/normalize.ts
diff --git a/packages/graph-engine/src/nodes/string/pad.ts b/packages/graph-engine/src/engines/dataflow/nodes/string/pad.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/string/pad.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/string/pad.ts
diff --git a/packages/graph-engine/src/nodes/string/regex.ts b/packages/graph-engine/src/engines/dataflow/nodes/string/regex.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/string/regex.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/string/regex.ts
diff --git a/packages/graph-engine/src/nodes/string/replace.ts b/packages/graph-engine/src/engines/dataflow/nodes/string/replace.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/string/replace.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/string/replace.ts
diff --git a/packages/graph-engine/src/nodes/string/split.ts b/packages/graph-engine/src/engines/dataflow/nodes/string/split.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/string/split.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/string/split.ts
diff --git a/packages/graph-engine/src/nodes/string/stringify.ts b/packages/graph-engine/src/engines/dataflow/nodes/string/stringify.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/string/stringify.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/string/stringify.ts
diff --git a/packages/graph-engine/src/nodes/string/uppercase.ts b/packages/graph-engine/src/engines/dataflow/nodes/string/uppercase.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/string/uppercase.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/string/uppercase.ts
diff --git a/packages/graph-engine/src/nodes/typing/assertDefined.ts b/packages/graph-engine/src/engines/dataflow/nodes/typing/assertDefined.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/typing/assertDefined.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/typing/assertDefined.ts
diff --git a/packages/graph-engine/src/nodes/typing/hasValue.ts b/packages/graph-engine/src/engines/dataflow/nodes/typing/hasValue.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/typing/hasValue.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/typing/hasValue.ts
diff --git a/packages/graph-engine/src/nodes/typing/index.ts b/packages/graph-engine/src/engines/dataflow/nodes/typing/index.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/typing/index.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/typing/index.ts
diff --git a/packages/graph-engine/src/nodes/typing/parseNumber.ts b/packages/graph-engine/src/engines/dataflow/nodes/typing/parseNumber.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/typing/parseNumber.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/typing/parseNumber.ts
diff --git a/packages/graph-engine/src/nodes/typing/parseUnit.ts b/packages/graph-engine/src/engines/dataflow/nodes/typing/parseUnit.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/typing/parseUnit.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/typing/parseUnit.ts
diff --git a/packages/graph-engine/src/nodes/typing/passUnit.ts b/packages/graph-engine/src/engines/dataflow/nodes/typing/passUnit.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/typing/passUnit.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/typing/passUnit.ts
diff --git a/packages/graph-engine/src/nodes/typography/baseFontSize.ts b/packages/graph-engine/src/engines/dataflow/nodes/typography/baseFontSize.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/typography/baseFontSize.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/typography/baseFontSize.ts
diff --git a/packages/graph-engine/src/nodes/typography/index.ts b/packages/graph-engine/src/engines/dataflow/nodes/typography/index.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/typography/index.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/typography/index.ts
diff --git a/packages/graph-engine/src/nodes/vector2/create.ts b/packages/graph-engine/src/engines/dataflow/nodes/vector2/create.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/vector2/create.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/vector2/create.ts
diff --git a/packages/graph-engine/src/nodes/vector2/destructure.ts b/packages/graph-engine/src/engines/dataflow/nodes/vector2/destructure.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/vector2/destructure.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/vector2/destructure.ts
diff --git a/packages/graph-engine/src/nodes/vector2/index.ts b/packages/graph-engine/src/engines/dataflow/nodes/vector2/index.ts
similarity index 100%
rename from packages/graph-engine/src/nodes/vector2/index.ts
rename to packages/graph-engine/src/engines/dataflow/nodes/vector2/index.ts
diff --git a/packages/graph-engine/src/graph/topologicSort.ts b/packages/graph-engine/src/engines/dataflow/topologicSort.ts
similarity index 94%
rename from packages/graph-engine/src/graph/topologicSort.ts
rename to packages/graph-engine/src/engines/dataflow/topologicSort.ts
index 38435c6e5..7b47ebec1 100644
--- a/packages/graph-engine/src/graph/topologicSort.ts
+++ b/packages/graph-engine/src/engines/dataflow/topologicSort.ts
@@ -3,7 +3,7 @@
  * This is a simplified topologic sort that does not use a graph library like graphlib which causes bloat in the bundle size
  */
 
-import { Graph } from './graph.js';
+import { Graph } from '../../graph/graph.js';
 
 /**
  * Note that this will fail if there are cycles in the graph
diff --git a/packages/graph-engine/src/programmatic/dataflow/base.ts b/packages/graph-engine/src/engines/dataflow/types/base.ts
similarity index 81%
rename from packages/graph-engine/src/programmatic/dataflow/base.ts
rename to packages/graph-engine/src/engines/dataflow/types/base.ts
index f1d35aaaa..824dc7b9e 100644
--- a/packages/graph-engine/src/programmatic/dataflow/base.ts
+++ b/packages/graph-engine/src/engines/dataflow/types/base.ts
@@ -1,7 +1,8 @@
-import { AnySchema, GraphSchema } from '../../schemas/index.js';
-import { IPort, Port } from '../port.js';
+import { AnySchema, GraphSchema } from '@/schemas/index.js';
+import { IPort, Port } from '@/programmatic/port.js';
+import { Node } from '@/programmatic/node.js';
 import { computed, makeObservable, observable } from 'mobx';
-import type { Node } from '../index.js';
+
 
 export const DATAFLOW_PORT = 2;
 
@@ -12,7 +13,7 @@ export interface IDataflowPort<V = any, T extends Node = Node>
 }
 export class DataFlowPort<V = any, T extends Node = Node> extends Port<T> {
 	//Note that we need null values for the observable to work
-	protected _dynamicType?: GraphSchema = null;
+	protected _dynamicType: GraphSchema | null = null;
 	protected _type: GraphSchema = AnySchema;
 	protected _value: V;
 	pType = DATAFLOW_PORT;
@@ -35,7 +36,7 @@ export class DataFlowPort<V = any, T extends Node = Node> extends Port<T> {
 
 	set(value: V, type?: GraphSchema) {
 		this._value = value;
-		this._dynamicType = type;
+		this._dynamicType = type || null;
 	}
 
 	get dynamicType() {
diff --git a/packages/graph-engine/src/engines/dataflow/types/input.ts b/packages/graph-engine/src/engines/dataflow/types/input.ts
new file mode 100644
index 000000000..7d48fa862
--- /dev/null
+++ b/packages/graph-engine/src/engines/dataflow/types/input.ts
@@ -0,0 +1,173 @@
+import { DataFlowCapability } from '@/engines/dataflow/index.js';
+import { DataFlowPort } from './base.js';
+import { GraphSchema } from '@/schemas/index.js';
+import { Node, TypeDefinition } from '@/programmatic/node.js';
+import { Output } from './output.js';
+import { SerializedInput } from '@/graph/types.js';
+import { action, makeObservable } from 'mobx';
+import getDefaults from 'json-schema-defaults-esm';
+
+export interface IInputProps<V = any, T extends Node = Node> {
+	name: string;
+	type: GraphSchema;
+	value: V;
+	node: T;
+	variadic?: boolean;
+	annotations?: Record<string, any>;
+}
+
+export interface ISetValue {
+	noPropagate?: boolean;
+	type?: GraphSchema;
+}
+
+export class Input<V = any, T extends Node = Node> extends DataFlowPort<V, T> {
+	constructor(props: IInputProps<V, T>) {
+		super(props);
+
+		this.variadic = props.variadic || false;
+		makeObservable(this, {
+			setValue: action,
+			reset: action,
+			deserialize: action
+		});
+	}
+
+	/**
+	 * Sets the value without a side effect. This should only be used internally
+	 * @param value
+	 */
+	setValue(value: V, opts?: ISetValue) {
+		this._value = value;
+		// debugger;
+		if (opts?.type !== undefined) {
+			if (this._type?.$id !== undefined) {
+				if (this._type?.$id !== opts.type.$id) {
+					this._dynamicType = opts.type;
+				}
+			}
+			//Otherwise do a structural comparison
+			else if (JSON.stringify(this._type) !== JSON.stringify(opts.type)) {
+				const { variadic, _dynamicType } = this;
+
+				// for variadic ports, we need to set the dynamic type depending on all the other connected types
+				if (
+					variadic &&
+					_dynamicType &&
+					JSON.stringify(_dynamicType) !== JSON.stringify(opts.type)
+				) {
+					const graph = this.node.getGraph();
+					const sourceNodesOutputTypes = this._edges.map(edge => {
+						const outputs = graph.getNode(edge.source).outputs;
+						return (outputs[edge.sourceHandle] as Output).type;
+					});
+
+					const firstNodeTypeStringValue = JSON.stringify(
+						sourceNodesOutputTypes[0]
+					);
+					if (
+						sourceNodesOutputTypes.every(
+							type => JSON.stringify(type) === firstNodeTypeStringValue
+						)
+					) {
+						this._dynamicType = {
+							type: 'array',
+							items: sourceNodesOutputTypes[0]
+						};
+					} else {
+						this._dynamicType = null;
+					}
+				} else {
+					this._dynamicType = opts.type;
+				}
+			}
+		}
+		if (!opts?.noPropagate) {
+			(
+				this.node.getGraph()?.capabilities.dataFlow as DataFlowCapability
+			).update(this.node.id);
+		}
+	}
+
+	/**
+	 * Resets the value of the input to the default value
+	 */
+	reset() {
+		this._dynamicType = null;
+		return (this._value = getDefaults(this._type) as V);
+	}
+
+	/**
+	 * Returns the underlying class of the input.
+	 * @returns
+	 */
+	get factory(): typeof Input {
+		//@ts-ignore
+		return this.constructor;
+	}
+
+	clone(): Input<V, T> {
+		const clonedInput = new this.factory({
+			name: this.name,
+			type: this.type,
+			node: this.node,
+			variadic: this.variadic,
+			annotations: { ...this.annotations },
+			value: this.value
+		});
+
+		return clonedInput;
+	}
+
+	fullType(): TypeDefinition {
+		return {
+			type: this._type,
+			variadic: this.variadic
+		};
+	}
+
+	serialize(): SerializedInput {
+		const type = this.fullType();
+		const serialized = {
+			name: this.name,
+			value: this.value,
+			type: type.type
+		} as SerializedInput;
+
+		if (this._dynamicType) {
+			serialized.dynamicType = this._dynamicType;
+		}
+
+		//Try compact the serialization by omitting the value if its the default
+		if (type.variadic) {
+			serialized.variadic = true;
+		}
+
+		if (Object.keys(this.annotations).length > 0) {
+			serialized.annotations = this.annotations;
+		}
+
+		return serialized;
+	}
+
+	deserialize(serialized: SerializedInput) {
+		this._dynamicType = serialized.dynamicType || null;
+		this.annotations = serialized.annotations || {};
+		this._value = serialized.value;
+	}
+}
+
+/**
+ * Converts a type definition to a map of inputs
+ * @example
+ * ```ts
+ * type myType = {
+ * a: number,
+ * b: string
+ * }
+ * type myInputs = ToInput<myType>
+ * ```
+ */
+export type ToInput<T> = {
+	[P in keyof T]: Input<T[P]>;
+};
diff --git a/packages/graph-engine/src/programmatic/nodes/dataflow.ts b/packages/graph-engine/src/engines/dataflow/types/node.ts
similarity index 93%
rename from packages/graph-engine/src/programmatic/nodes/dataflow.ts
rename to packages/graph-engine/src/engines/dataflow/types/node.ts
index ce18341e6..574389f45 100644
--- a/packages/graph-engine/src/programmatic/nodes/dataflow.ts
+++ b/packages/graph-engine/src/engines/dataflow/types/node.ts
@@ -1,4 +1,4 @@
-import { INodeDefinition, Node, TypeDefinition } from './node.js';
+import { INodeDefinition, Node, TypeDefinition } from '../node.js';
 import { Input, Output } from '../index.js';
 import { NodeRun } from '@/types.js';
 import { action, computed, makeObservable, observable } from 'mobx';
@@ -15,7 +15,7 @@ export interface IDataflowNode<
 export class Dataflow<T extends Node & IDataflowNode<T>> {
 	node: T;
 	public lastExecutedDuration = 0;
-	public error?: Error = null;
+	public error?: Error = undefined;
 
 	constructor(node: T) {
 		this.node = node;
@@ -29,6 +29,7 @@ export class Dataflow<T extends Node & IDataflowNode<T>> {
 	}
 
 	dispose() {
+		//@ts-ignore This is to force release of the node reference
 		this.node = null;
 	}
 
@@ -85,7 +86,7 @@ export class Dataflow<T extends Node & IDataflowNode<T>> {
 			await this.execute();
 			this.error = undefined;
 		} catch (err) {
-			console.log(err);
+			this.node.getGraph()?.logger.error(err);
 			this.error = err as Error;
 		}
 		const end = performance.now();
@@ -98,9 +99,6 @@ export class Dataflow<T extends Node & IDataflowNode<T>> {
 			start,
 			end
 		};
-
-		this.node.getGraph()?.emit('nodeExecuted', result);
-
 		return result;
 	}
 
diff --git a/packages/graph-engine/src/engines/dataflow/types/output.ts b/packages/graph-engine/src/engines/dataflow/types/output.ts
new file mode 100644
index 000000000..147023158
--- /dev/null
+++ b/packages/graph-engine/src/engines/dataflow/types/output.ts
@@ -0,0 +1,89 @@
+import { DataFlowPort } from './base.js';
+import { GraphSchema } from '@/schemas/index.js';
+import { Input } from './input.js';
+import { Node } from '@/programmatic/node.js';
+import { action, makeObservable } from 'mobx';
+
+export interface IOutputProps<V = any, T extends Node = Node> {
+	name: string;
+	type: GraphSchema;
+	value: V;
+	visible?: boolean;
+	node: T;
+}
+
+export interface ConnectionStatus {
+	/**
+	 * Whether the connection is valid
+	 */
+	valid: boolean;
+}
+
+export class Output<V = any, T extends Node = Node> extends DataFlowPort<V, T> {
+	constructor(props: IOutputProps<V, T>) {
+		super(props);
+		makeObservable(this, {
+			set: action
+		});
+	}
+
+	set(value: V, type?: GraphSchema) {
+		this._value = value;
+		this._dynamicType = type || null;
+	}
+
+	connect(target: Input<V>) {
+		return this.node.getGraph().connect(this.node, this, target.node, target);
+	}
+
+	/**
+	 * Returns the underlying class of the input.
+	 * @returns
+	 */
+	get factory(): typeof Output {
+		//@ts-ignore
+		return this.constructor;
+	}
+
+	dispose() {
+		const graph = this.node.getGraph();
+		if (graph) {
+			graph.outEdges(this.node.id, this.name).forEach(edge => {
+				if (edge.id) {
+					return;
+				}
+				graph?.removeEdge(edge.id);
+			});
+		}
+	}
+
+	clone(): Output<V, T> {
+		const clonedOutput = new this.factory({
+			name: this.name,
+			type: this.type,
+			value: this._value,
+			visible: this.visible,
+			node: this.node
+		});
+
+		clonedOutput._dynamicType = this._dynamicType;
+		clonedOutput._edges = [...this._edges];
+
+		return clonedOutput;
+	}
+}
+
+/**
+ * Converts a type definition to a map of inputs
+ * @example
+ * ```ts
+ * type myType = {
+ * a: number,
+ * b: string
+ * }
+ * type myInputs = ToInput<myType>
+ * ```
+ */
+export type ToOutput<T> = {
+	[P in keyof T]: Output<T[P]>;
+};
diff --git a/packages/graph-engine/src/graph/graph.ts b/packages/graph-engine/src/graph/graph.ts
index c22d18848..00cbc041c 100644
--- a/packages/graph-engine/src/graph/graph.ts
+++ b/packages/graph-engine/src/graph/graph.ts
@@ -1,10 +1,14 @@
+import { Annotations } from '@/types/annotations.js';
 import { AnySchema } from '@/schemas/index.js';
-import { DataflowNode } from '@/programmatic/nodes/dataflow.js';
+import { CapabilityFactory } from '@/capabilities/interface.js';
+import { DataflowNode } from '@/engines/dataflow/types/node.js';
 import { Edge, VariadicEdgeData } from '../programmatic/edge.js';
-import { Node } from '../programmatic/nodes/node.js';
+import { ILogger, baseLogger } from '../types/logger.js';
+import { Node } from '../programmatic/node.js';
 import { Port } from '@/programmatic/port.js';
 import { VERSION } from '../constants.js';
 import {
+	annotatedCapabilityPrefix,
 	annotatedId,
 	annotatedVariadicIndex,
 	annotatedVersion
@@ -15,16 +19,6 @@ import { nanoid as uuid } from 'nanoid';
 import type { ExternalLoader, NodeRun, NodeStart } from '../types.js';
 import type { NodeLoader, SerializedGraph } from './types.js';
 
-	inputs?: Record<string, InputDefinition>;
-	/**
-	 * Whether to track and emit stats as part of the execution
-	 */
-	stats?: boolean;
-	/**
-	 * Whether to provide a journal of the execution
-	 */
-	journal?: boolean;
-};
 
 export type EdgeOpts = {
 	id: string;
@@ -107,7 +101,7 @@ const defaultGraphOpts: IGraph = {
 export class Graph {
 	finalizers: Record<string, any[]> = {};
 	listeners: Record<string, any[]> = {};
-	public annotations: Record<string, any> = {};
+	public annotations: Annotations = {};
 
 	/**
 	 * Used internally to store capability factories
@@ -120,11 +114,6 @@ export class Graph {
 
 	logger: ILogger = baseLogger;
 
-	messageQueue: {
-		eventName: string;
-		data: any;
-		origin: Node;
-	}[] = [];
 
 	externalLoader?: ExternalLoader;
 	/**
@@ -134,7 +123,7 @@ export class Graph {
 	 */
 	successorNodes: Record<string, string[]> = {};
 
-	constructor(input: IGraph = defaultGraphOpts) {
+	constructor(input: IGraph = defaultGraphOpts) { 
 		this.annotations = input.annotations || {};
 		this.nodes = {};
 		this.edges = {};
@@ -158,11 +147,6 @@ export class Graph {
 	addNode(node: Node) {
 		this.nodes[node.id] = node;
 		this.emit('nodeAdded', node);
-
-		//Trigger the onStart event if the graph is in play mode
-		if (this.annotations[annotatedPlayState] === 'playing') {
-			node.onStart();
-		}
 	}
 	/**
 	 * Removes a node from the graph and disconnects all the edges.
@@ -249,23 +233,6 @@ export class Graph {
 		return Object.keys(this.nodes);
 	}
 
-		const node = this.nodes[nodeID];
-		if (!node) {
-			throw new Error(`No node found with id ${nodeID}`);
-		}
-
-		const res = await node.run();
-		//Don't propagate if there is an error
-		if (res.error) {
-			return;
-		}
-
-		if (noRecursive) {
-			return;
-		}
-
-		await this.propagate(node.id);
-	}
 	/**
 	 * Serialize the graph for transport
 	 * @returns
@@ -453,7 +420,7 @@ export class Graph {
 		return clonedGraph;
 	}
 
-	private forEachNode(cb) {
+	forEachNode(cb) {
 		Object.values(this.nodes).forEach(cb);
 	}
 
@@ -533,130 +500,7 @@ export class Graph {
 
 		return dedup(out).map(x => this.nodes[x]);
 	}
-	/**
-	 * Triggers a ripple effect on the graph starting from the given edge
-	 * @returns
-	 */
-	ripple(output: Output) {
-		//Get the edges
-		const edges = output._edges;
-
-		const targets = edges.reduce((acc, edge) => {
-			const target = this.getNode(edge.target);
-			if (!target) {
-				return acc;
-			}
-			//Get the input
-			const input = target.inputs[edge.targetHandle];
-			if (!input) {
-				return acc;
-			}
-
-			//Check if setting the value would result in an execution
-			//If pure and the value is the same ignore
-			if (input.value === output.value) {
-				return acc;
-			}
 
-			if (input.variadic) {
-				//Don't attempt mutation of the original array
-				const newVal = [...(input.value || [])];
-				newVal[edge.annotations[annotatedVariadicIndex]!] = output.value;
-				//Extend the variadic array
-				input.setValue(newVal, {
-					//Create a new type assuming that the items will be of the same type
-					type: {
-						type: 'array',
-						items: output.type
-					},
-					//We are controlling propagation
-					noPropagate: true
-				});
-			} else {
-				input.setValue(output.value, {
-					type: output.type,
-					//We are controlling propagation
-					noPropagate: true
-				});
-			}
-
-			return acc.concat(target);
-		}, [] as Node[]);
-		//Cheaper to emit once
-		this.emit('valueSent', edges);
-
-		//Now we need to execute the targets. An output might be connected multiple times to the same target so we will need to dedup
-		dedup(targets.map(x => x.id)).forEach(x => this.update(x));
-	}
-
-	/**
-	 * Triggers the execution of the node and updates the successor nodes
-	 * @param nodeId
-	 * @param oneShot
-	 * @returns
-	 */
-	async propagate(nodeId: string, oneShot: boolean = false) {
-		const node = this.getNode(nodeId);
-		if (!node) {
-			return;
-		}
-		//Update all the outgoing edges
-		const outEdges = this.outEdges(node.id);
-		/**
-		 * This is a heuristic to not attempt to update nodes that don't have a detected port at the end-
-		 */
-		const affectedNodes = outEdges
-			.map(edge => {
-				const output = node.outputs[edge.sourceHandle] as Output;
-
-				//It might be dynamic
-				if (!output) {
-					return;
-				}
-				const value = node.outputs[edge.sourceHandle].value;
-				//write the value to the input port of the target
-				const target = this.getNode(edge.target);
-				if (!target) {
-					return;
-				}
-				const input = target.inputs[edge.targetHandle];
-				if (!input) {
-					return;
-				}
-
-				if (input.variadic) {
-					//Don't attempt mutation of the original array
-					const newVal = [...(input.value || [])];
-					newVal[edge.annotations[annotatedVariadicIndex]!] = output.value;
-					//Extend the variadic array
-					input.setValue(newVal, {
-						//We are controlling propagation
-						noPropagate: true
-					});
-				} else {
-					//Ignore
-					if (input.value === value) {
-						return;
-					}
-
-					input.setValue(value, {
-						type: node.outputs[edge.sourceHandle].type,
-						//We are controlling propagation
-						noPropagate: true
-					});
-				}
-
-				return edge.target;
-			})
-			//Remove holes
-			.filter(Boolean) as string[];
-
-		if (!oneShot) {
-			//These are the nodes to be update
-			const nodes = dedup(affectedNodes);
-			await Promise.all(nodes.map(x => this.update(x)));
-		}
-	}
 	/**
 	 * Creates an edge connection between two nodes
 	 * @param source
@@ -691,8 +535,8 @@ export class Graph {
 		targetPort._edges.push(edge);
 
 		sourcePort?._edges.push(edge);
-		this.emit('edgeAdded', finalEdge);
-		return finalEdge;
+		this.emit('edgeAdded', edge);
+		return edge;
 	}
 	/**
 	 * Return all edges that point into the nodes inputs.
diff --git a/packages/graph-engine/src/graph/index.ts b/packages/graph-engine/src/graph/index.ts
index ccafb467b..fd8c7c71f 100644
--- a/packages/graph-engine/src/graph/index.ts
+++ b/packages/graph-engine/src/graph/index.ts
@@ -1,4 +1,2 @@
 export * from './types.js';
-export * from './topologicSort.js';
-export * from './terminals.js';
 export * from './graph.js';
diff --git a/packages/graph-engine/src/graph/terminals.ts b/packages/graph-engine/src/graph/terminals.ts
deleted file mode 100644
index 5386c4085..000000000
--- a/packages/graph-engine/src/graph/terminals.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Graph } from './graph.js';
-import { Node } from '../programmatic/node.js';
-
-export type Terminals = {
-	input?: Node;
-	output?: Node;
-};
-
-export const findTerminals = (graph: Graph): Terminals => {
-	const terminals: Terminals = {
-		input: undefined,
-		output: undefined
-	};
-
-	Object.values(graph.nodes).forEach(node => {
-		switch (node.factory.type) {
-			case 'studio.tokens.generic.input':
-				terminals.input = node;
-				break;
-			case 'studio.tokens.generic.output':
-				terminals.output = node;
-				break;
-		}
-	});
-	return terminals;
-};
diff --git a/packages/graph-engine/src/graph/types.ts b/packages/graph-engine/src/graph/types.ts
index a6be45cf0..4b441445c 100644
--- a/packages/graph-engine/src/graph/types.ts
+++ b/packages/graph-engine/src/graph/types.ts
@@ -1,6 +1,6 @@
-import { Graph, TypeDefinition } from '../index.js';
+import { Graph } from '../index.js';
 import { GraphSchema } from '../schemas/index.js';
-import { Node } from '../programmatic/node.js';
+import { Node, TypeDefinition } from '@/programmatic/node.js';
 
 export interface SerializedInput {
 	name: string;
diff --git a/packages/graph-engine/src/index.ts b/packages/graph-engine/src/index.ts
index 1630dbb27..137b8aef1 100644
--- a/packages/graph-engine/src/index.ts
+++ b/packages/graph-engine/src/index.ts
@@ -1,23 +1,21 @@
 export * from './constants.js';
 export * from './types.js';
 export * from './graph/index.js';
-export * from './nodes/index.js';
 export * from './programmatic/index.js';
 export * from './schemas/index.js';
 export * from './annotations/index.js';
-export * from './graph/interfaces.js';
+export * from './types/logger.js';
 export * from './nodes/color/lib/utils.js';
 
-//Nodes
-export * from './programmatic/nodes/dataflow.js';
-export * from './programmatic/nodes/controlflow.js';
+//Base definitions
+export * from './programmatic/index.js';
 
-//Ports
-export * from './programmatic/dataflow/base.js';
-export * from './programmatic/controlflow/base.js';
+//Engines
+export * from './engines/dataflow/index.js';
+export * from './engines/controlflow/index.js';
+export * from './engines/behaviour/index.js';
 
 //Capabilities
-export * from './capabilities/controlFlow.js';
-export * from './capabilities/dataflow.js';
+export * from './engines/dataflow/index.js';
 export * from './capabilities/interface.js';
 export * from './capabilities/secret.js';
diff --git a/packages/graph-engine/src/programmatic/edge.ts b/packages/graph-engine/src/programmatic/edge.ts
index a49bfe751..39b2a2a4a 100644
--- a/packages/graph-engine/src/programmatic/edge.ts
+++ b/packages/graph-engine/src/programmatic/edge.ts
@@ -1,6 +1,6 @@
-import { Annotated } from './annotated.js';
-import { SerializedEdge } from '../index.js';
+import { Annotated } from '../types/annotated.js';
 import { nanoid as uuid } from 'nanoid';
+import type { SerializedEdge } from '../index.js';
 
 /**
  * Additional data stored on an edge
@@ -33,9 +33,21 @@ export const cloneEdge = (edge: Edge): Edge => {
 
 export class Edge extends Annotated {
 	id: string;
+	/**
+	 * The ID of the source node, ie starting node
+	 */
 	source: string;
+	/**
+	 * The name of the port on the source node
+	 */
 	sourceHandle: string;
+	/**
+	 * The ID of the target node, ie ending node
+	 */
 	target: string;
+	/**
+	 * The name of the port on the target node
+	 */
 	targetHandle: string;
 
 	constructor(props: IEdge) {
diff --git a/packages/graph-engine/src/programmatic/input.ts b/packages/graph-engine/src/programmatic/input.ts
index 430036399..9aa1b6083 100644
--- a/packages/graph-engine/src/programmatic/input.ts
+++ b/packages/graph-engine/src/programmatic/input.ts
@@ -1,16 +1,14 @@
 import { GraphSchema } from '../schemas/index.js';
-import { Node } from './node.js';
 import { Port } from './port.js';
 import { SerializedInput } from '../graph/types.js';
-import { TypeDefinition } from './node.js';
 import { action, makeObservable } from 'mobx';
 import getDefaults from 'json-schema-defaults-esm';
+import type { Node, TypeDefinition } from './node.js';
 
 export interface IInputProps<T = any> {
 	name: string;
 	type: GraphSchema;
 	value: T;
-	visible?: boolean;
 	node: Node;
 	variadic?: boolean;
 	annotations?: Record<string, any>;
@@ -21,7 +19,7 @@ export interface ISetValue {
 	type?: GraphSchema;
 }
 
-export class Input<T = any> extends Port<T> {
+export class Input<T extends Node = Node> extends Port<T> {
 	/**
 	 * Expects to have connections to this node done by enqueing the edge
 	 */
@@ -113,7 +111,6 @@ export class Input<T = any> extends Port<T> {
 		const clonedInput = new this.factory({
 			name: this.name,
 			type: this.type,
-			visible: this.visible,
 			node: this.node,
 			variadic: this.variadic,
 			annotations: { ...this.annotations },
@@ -126,7 +123,6 @@ export class Input<T = any> extends Port<T> {
 	fullType(): TypeDefinition {
 		return {
 			type: this._type,
-			visible: this.visible,
 			variadic: this.variadic
 		};
 	}
@@ -147,10 +143,6 @@ export class Input<T = any> extends Port<T> {
 		if (type.variadic) {
 			serialized.variadic = true;
 		}
-		if (type.visible == false) {
-			serialized.visible = false;
-		}
-
 		if (Object.keys(this.annotations).length > 0) {
 			serialized.annotations = this.annotations;
 		}
@@ -159,7 +151,6 @@ export class Input<T = any> extends Port<T> {
 	}
 
 	deserialize(serialized: SerializedInput) {
-		this.visible = serialized.visible ?? true;
 		this._dynamicType = serialized.dynamicType || null;
 		this.annotations = serialized.annotations || {};
 		this._value = serialized.value;
diff --git a/packages/graph-engine/src/programmatic/node.ts b/packages/graph-engine/src/programmatic/node.ts
index 65ba35103..77190e9ab 100644
--- a/packages/graph-engine/src/programmatic/node.ts
+++ b/packages/graph-engine/src/programmatic/node.ts
@@ -1,35 +1,18 @@
+import { Annotated } from '../types/annotated.js';
 import { Graph } from '../graph/index.js';
 import { GraphSchema } from '../schemas/index.js';
 import { IDeserializeOpts, SerializedNode } from '../graph/types.js';
 import { Input } from './input.js';
 import { Output } from './output.js';
-import { action, computed, makeObservable, observable } from 'mobx';
-import { annotatedNodeRunning } from '../annotations/index.js';
-import { v4 as uuid } from 'uuid';
-import getDefaults from 'json-schema-defaults-esm';
-import type { NodeRun } from '../types.js';
+import { Port } from './port.js';
+import { action, makeObservable, observable } from 'mobx';
+import { nanoid as uuid } from 'nanoid';
 
-export interface INodeDefinition {
-	graph: Graph;
+export interface INodeDefinition<GraphType = Graph, InputType = Input, OutputType = Output> {
+	graph: GraphType;
 	id?: string;
-	inputs?: Record<string, Input>;
-	outputs?: Record<string, Output>;
-	annotations?: Record<string, unknown>;
-}
-
-export interface TypeDefinition {
-	type: GraphSchema;
-	/**
-	 * When exposing an array of inputs or outputs, allow specific control for connecting each item
-	 */
-	variadic?: boolean;
-	/**
-	 * Whether the input is visible by default in the UI
-	 */
-	visible?: boolean;
-	/**
-	 * Additional annotations to store on the input
-	 */
+	inputs?: Record<string, InputType>;
+	outputs?: Record<string, OutputType>;
 	annotations?: Record<string, unknown>;
 }
 
@@ -45,34 +28,37 @@ type UnwrapInput<T> = Prettify<{
 	[K in keyof T]: InputValue<T[K]>;
 }>;
 
-export class Node {
+export interface TypeDefinition {
+	type: GraphSchema;
+	/**
+	 * When exposing an array of inputs or outputs, allow specific control for connecting each item
+	 */
+	variadic?: boolean;
+	/**
+	 * Additional annotations to store on the input
+	 */
+	annotations?: Record<string, unknown>;
+}
+
+export class Node<GraphType extends Graph = Graph, InputType extends Input = Input, OutputType extends Output = Output> extends Annotated {
 	/**
 	 * Unique instance specific identifier
 	 */
 	readonly id: string;
 	public static readonly description?: string;
 	public static readonly title?: string;
-	public static readonly annotations: Record<string, unknown> = {};
-	/**
-	 * The groups this node belongs to as a string array
-	 */
-	static groups?: string[];
 	static readonly type: string = 'unknown';
 
 	/**
 	 * This holds the definitions of the inputs and outputs
 	 */
-	public inputs: Record<string, Input> = {};
-	public outputs: Record<string, Output> = {};
-	public annotations: Record<string, unknown> = {};
-
-	public lastExecutedDuration = 0;
+	public inputs: Record<string, Port> = {};
+	public outputs: Record<string, Port> = {};
 
-	private _graph: Graph;
+	private _graph: GraphType;
 
-	public error: Error | null = null;
-
-	constructor(props: INodeDefinition) {
+	constructor(props: INodeDefinition<GraphType, InputType, OutputType>) {
+		super(props);
 		this.id = props.id || uuid();
 		this._graph = props.graph;
 		if (this._graph) {
@@ -82,15 +68,8 @@ export class Node {
 		makeObservable(this, {
 			inputs: observable.shallow,
 			outputs: observable.shallow,
-			error: observable.ref,
-			annotations: observable.shallow,
 			addInput: action,
-			isRunning: computed,
-			run: action,
-			execute: action,
 			addOutput: action,
-			clearOutputs: action,
-			setAnnotation: action,
 			removeInput: action,
 			removeOutput: action
 		});
@@ -102,29 +81,11 @@ export class Node {
 	 * @param name
 	 * @param input
 	 */
-	addInput<T = unknown>(name: string, type: TypeDefinition) {
-		//Extract the default value from the schema
-		return (this.inputs[name] = new Input<T>({
-			name,
-			...type,
-			visible: type.visible !== undefined ? type.visible : true,
-			value: getDefaults(type.type) as T,
-			node: this
-		}));
-	}
-	addOutput<T = unknown>(name: string, type: TypeDefinition) {
-		this.outputs[name] = new Output<T>({
-			name,
-			...type,
-			type: type.type,
-			visible: type.visible !== undefined ? type.visible : true,
-			value: getDefaults(type.type) as T,
-			node: this
-		});
+	addInput(name: string, port: InputType) {
+		this.inputs[name] = port;
 	}
-
-	setAnnotation(key: string, value: unknown) {
-		this.annotations[key] = value;
+	addOutput(name: string, port: OutputType) {
+		this.outputs[name] = port;
 	}
 	/**
 	 * Removes a named input from the node. This should only be used for dynamic inputs
@@ -140,11 +101,6 @@ export class Node {
 			});
 		}
 		delete this.inputs[name];
-
-		if (this._graph) {
-			//Ask to be recalculated
-			this._graph?.update(this.id);
-		}
 	}
 
 	removeOutput(name: string) {
@@ -157,67 +113,6 @@ export class Node {
 			});
 		}
 		delete this.outputs[name];
-		//We do not need to be recalculated
-	}
-
-	/**
-	 * This is the place to add applicate specific logic to execute the node.
-	 * This can be used directly, but you should preferably never call this and instead execute from the graph which will control the lifecycle of the node
-	 * @override
-	 */
-	execute(): Promise<void> | void {}
-
-	/**
-	 * Runs the node. Internally this calls the execute method, but the run entrypoint allows for additional tracking and lifecycle management
-	 */
-	async run(): Promise<NodeRun> {
-		this.annotations[annotatedNodeRunning] = true;
-		const start = performance.now();
-		this.getGraph()?.emit('nodeStarted', {
-			node: this,
-			start
-		});
-		try {
-			await this.execute();
-			this.error = null;
-		} catch (err) {
-			this._graph.logger.error(err);
-			this.error = err as Error;
-		}
-		const end = performance.now();
-		delete this.annotations[annotatedNodeRunning];
-		this.lastExecutedDuration = end - start;
-
-		const result = {
-			node: this,
-			error: this.error,
-			start,
-			end
-		};
-
-		this.getGraph()?.emit('nodeExecuted', result);
-
-		return result;
-	}
-
-	/**
-	 * Asks the controlling graph to load a resource.
-	 * This cannot be called if the node is not part of a graph
-	 * @param uri
-	 * @param data
-	 */
-	async load(uri: string, data?: unknown) {
-		return this._graph?.loadResource(uri, this, data);
-	}
-	get isRunning() {
-		return !!this.annotations[annotatedNodeRunning];
-	}
-
-	/**
-	 * Clears all the outputs
-	 */
-	clearOutputs() {
-		this.outputs = {};
 	}
 
 	public setGraph(graph: Graph) {
@@ -236,10 +131,13 @@ export class Node {
 		});
 
 		// Copy input values
-		Object.entries(this.inputs).forEach(([key, input]) => {
+		Object.entries(this.inputs).forEach(([key, input]: [string, Input]) => {
+			//TODO remove this. The dataflow cloning needs to be handled by the dataflow itself
 			if (input.variadic) return;
-			if (clonedNode.inputs[key]) {
-				clonedNode.inputs[key].setValue(input.value);
+			const targetInput = clonedNode.inputs[key] as Input;
+			if (targetInput && targetInput.pType === DATAFLOW_PORT) {
+				targetInput.setValue(input.value);
+				//Try handle dynamic inputs
 			} else {
 				clonedNode.inputs[key] = input.clone();
 			}
@@ -264,7 +162,7 @@ export class Node {
 	 * Get the type of the nodes
 	 * @returns
 	 */
-	public nodeType = () => {
+	public nodeType = (): string => {
 		//@ts-ignore
 		return this.constructor.type;
 	};
@@ -286,7 +184,9 @@ export class Node {
 			id: this.id,
 			type: this.nodeType(),
 			//Filter out any inputs that are connected as they will be serialized as part of the edge
-			inputs: Object.values(this.inputs).map(x => x.serialize())
+			inputs: Object.values(this.inputs)
+				.map(x => (x as Input).serialize?.())
+				.filter(x => !!x)
 		} as SerializedNode;
 		if (Object.keys(this.annotations).length > 0) {
 			serialized.annotations = this.annotations;
@@ -318,14 +218,13 @@ export class Node {
 					name: input.name,
 					type: input.type,
 					variadic: input.variadic,
-					visible: input.visible,
 					value: input.value,
 					node: newNode,
 					annotations: input.annotations
 				});
 			} else {
 				//Set the value from the saved value
-				foundInput.deserialize(input);
+				(foundInput as Input).deserialize?.(input);
 			}
 		});
 
@@ -338,7 +237,9 @@ export class Node {
 
 	getAllInputs = (): UnwrapInput<this['inputs']> => {
 		return Object.fromEntries(
-			Object.entries(this.inputs).map(([key, value]) => [key, value.value])
+			Object.entries(this.inputs as Record<string, Input>).map(
+				([key, value]) => [key, value.value]
+			)
 		) as UnwrapInput<this['inputs']>;
 	};
 
@@ -359,27 +260,9 @@ export class Node {
 	 *  // ...
 	 * }
 	 */
-	dispose = () => {
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	dispose(params: any) {
 		//@ts-ignore This is forcing manual cleanup
 		this._graph = undefined;
 	};
-
-	/**
-	 * Function to call when the graph has been started.
-	 * This is only really necessary for nodes that need to do something when the graph is expected to be running continuously
-	 */
-	public onStart = () => {};
-	public onStop = () => {};
-	/**
-	 * By default, the node will stop when the graph is paused
-	 */
-	public onPause = () => {
-		this.onStop();
-	};
-	/**
-	 * By default, the node will start when the graph is resumed
-	 */
-	public onResume = () => {
-		this.onStart();
-	};
 }
diff --git a/packages/graph-engine/src/programmatic/nodes/controlflow.ts b/packages/graph-engine/src/programmatic/nodes/controlflow.ts
deleted file mode 100644
index bf87031b0..000000000
--- a/packages/graph-engine/src/programmatic/nodes/controlflow.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import {
-	ControlFlowInput,
-	ControlFlowTriggerFunction
-} from '../controlflow/input.js';
-import { ControlFlowOutput } from '../controlflow/output.js';
-import { INodeDefinition, Node, TypeDefinition } from './node.js';
-
-export interface IControlFlowNode<
-	T extends Node & IControlFlowNode<T> = ControlFlowNode
-> {
-	controlflow: ControlFlow<T>;
-}
-
-export class ControlFlow<T extends Node & IControlFlowNode<T>> {
-	node: T;
-	constructor(node: T) {
-		this.node = node;
-	}
-
-	dispose() {
-		this.node = null;
-	}
-
-	/**
-	 * Creates a new input and adds it to the node
-	 * @param name
-	 * @param input
-	 */
-	addInput<T = unknown>(
-		name: string,
-		executor: ControlFlowTriggerFunction<T>,
-		type?: TypeDefinition
-	) {
-		return this.node.addInput(
-			name,
-			new ControlFlowInput<T>({
-				name,
-				on: executor,
-				...type,
-				node: this.node
-			})
-		);
-	}
-
-	addOutput<T = unknown>(name: string, type?: TypeDefinition) {
-		return this.node.addOutput(
-			name,
-			new ControlFlowOutput<T>({
-				...type,
-				name,
-				node: this.node
-			})
-		);
-	}
-
-	/**
-	 * Function to call when the graph has been started.
-	 * This is only really necessary for nodes that need to do something when the graph is expected to be running continuously
-	 */
-	public onStart = () => {};
-	public onStop = () => {};
-	/**
-	 * By default, the node will stop when the graph is paused
-	 */
-	public onPause = () => {
-		this.onStop();
-	};
-	/**
-	 * By default, the node will start when the graph is resumed
-	 */
-	public onResume = () => {
-		this.onStart();
-	};
-}
-
-/**
- * The dataflow node can be used to easily create dataflow based nodes by extending off of it and implementing the execute method
- */
-export class ControlFlowNode
-	extends Node
-	implements IControlFlowNode<ControlFlowNode>
-{
-	controlflow: ControlFlow<ControlFlowNode> = new ControlFlow<ControlFlowNode>(
-		this
-	);
-	constructor(props: INodeDefinition) {
-		super(props);
-	}
-}
diff --git a/packages/graph-engine/src/programmatic/nodes/node.ts b/packages/graph-engine/src/programmatic/nodes/node.ts
deleted file mode 100644
index 5c6005f51..000000000
--- a/packages/graph-engine/src/programmatic/nodes/node.ts
+++ /dev/null
@@ -1,273 +0,0 @@
-import { Annotated } from '../annotated.js';
-import { DATAFLOW_PORT } from '../dataflow/base.js';
-import { Graph } from '../../graph/index.js';
-import { GraphSchema } from '../../schemas/index.js';
-import { IDeserializeOpts, SerializedNode } from '../../graph/types.js';
-import { Input } from '../dataflow/input.js';
-import { Output } from '../dataflow/output.js';
-import { Port } from '../port.js';
-import { action, makeObservable, observable } from 'mobx';
-import { nanoid as uuid } from 'nanoid';
-
-export interface INodeDefinition {
-	graph: Graph;
-	id?: string;
-	inputs?: Record<string, Input>;
-	outputs?: Record<string, Output>;
-	annotations?: Record<string, unknown>;
-}
-
-// Helper type to preserve literal types
-type Prettify<T> = {
-	[K in keyof T]: T[K];
-	// eslint-disable-next-line @typescript-eslint/ban-types
-} & {};
-
-type InputValue<T> = T extends Input<infer U> ? U : never;
-// Updated UnwrapInput type
-type UnwrapInput<T> = Prettify<{
-	[K in keyof T]: InputValue<T[K]>;
-}>;
-
-export interface TypeDefinition {
-	type: GraphSchema;
-	/**
-	 * When exposing an array of inputs or outputs, allow specific control for connecting each item
-	 */
-	variadic?: boolean;
-	/**
-	 * Whether the input is visible by default in the UI
-	 */
-	visible?: boolean;
-	/**
-	 * Additional annotations to store on the input
-	 */
-	annotations?: Record<string, unknown>;
-}
-
-export class Node extends Annotated {
-	/**
-	 * Unique instance specific identifier
-	 */
-	readonly id: string;
-	public static readonly description?: string;
-	public static readonly title?: string;
-	static readonly type: string = 'unknown';
-
-	/**
-	 * This holds the definitions of the inputs and outputs
-	 */
-	public inputs: Record<string, Port> = {};
-	public outputs: Record<string, Port> = {};
-
-	private _graph: Graph;
-
-	constructor(props: INodeDefinition) {
-		super(props);
-		this.id = props.id || uuid();
-		this._graph = props.graph;
-		if (this._graph) {
-			this._graph.addNode(this);
-		}
-
-		makeObservable(this, {
-			inputs: observable.shallow,
-			outputs: observable.shallow,
-			addInput: action,
-			addOutput: action,
-			removeInput: action,
-			removeOutput: action
-		});
-		//Defined nodes would be specified here
-	}
-
-	/**
-	 * Creates a new input and adds it to the node
-	 * @param name
-	 * @param input
-	 */
-	addInput(name: string, port: Port) {
-		this.inputs[name] = port;
-	}
-	addOutput(name: string, port: Port) {
-		this.outputs[name] = port;
-	}
-	/**
-	 * Removes a named input from the node. This should only be used for dynamic inputs
-	 * @param name
-	 */
-	removeInput(name: string) {
-		if (this._graph) {
-			this._graph.inEdges(this.id, name).forEach(edge => {
-				if (edge.id) {
-					return;
-				}
-				this._graph?.removeEdge(edge.id);
-			});
-		}
-		delete this.inputs[name];
-	}
-
-	removeOutput(name: string) {
-		if (this._graph) {
-			this._graph.outEdges(this.id, name).forEach(edge => {
-				if (edge.id) {
-					return;
-				}
-				this._graph?.removeEdge(edge.id);
-			});
-		}
-		delete this.outputs[name];
-	}
-
-	public setGraph(graph: Graph) {
-		this._graph = graph;
-	}
-
-	public getGraph() {
-		return this._graph;
-	}
-
-	public clone(newGraph: Graph): Node {
-		// Create a new instance using the constructor
-		const clonedNode = new this.factory({
-			graph: newGraph,
-			id: uuid()
-		});
-
-		// Copy input values
-		Object.entries(this.inputs).forEach(([key, input]: [string, Input]) => {
-			//TODO remove this. The dataflow cloning needs to be handled by the dataflow itself
-			if (input.variadic) return;
-			const targetInput = clonedNode.inputs[key] as Input;
-			if (targetInput && targetInput.pType === DATAFLOW_PORT) {
-				targetInput.setValue(input.value);
-				//Try handle dynamic inputs
-			} else {
-				clonedNode.inputs[key] = input.clone();
-			}
-		});
-
-		Object.entries(this.outputs).forEach(([key, output]) => {
-			clonedNode.outputs[key] = output.clone();
-		});
-
-		clonedNode.annotations = { ...this.annotations };
-
-		// Clone inner graph if it exists
-		// @ts-expect-error
-		if (this._innerGraph) {
-			// @ts-expect-error
-			clonedNode._innerGraph = this._innerGraph.clone();
-		}
-
-		return clonedNode;
-	}
-	/**
-	 * Get the type of the nodes
-	 * @returns
-	 */
-	public nodeType = () => {
-		//@ts-ignore
-		return this.constructor.type;
-	};
-	/**
-	 * Returns the underlying class of the node. Useful for getting class specific properties
-	 * @returns
-	 */
-	get factory(): typeof Node {
-		//@ts-ignore
-		return this.constructor;
-	}
-
-	/**
-	 * Serializes the node value for storage
-	 * @returns
-	 */
-	public serialize(): SerializedNode {
-		const serialized = {
-			id: this.id,
-			type: this.nodeType(),
-			//Filter out any inputs that are connected as they will be serialized as part of the edge
-			inputs: Object.values(this.inputs)
-				.map(x => (x as Input).serialize?.())
-				.filter(x => !!x)
-		} as SerializedNode;
-		if (Object.keys(this.annotations).length > 0) {
-			serialized.annotations = this.annotations;
-		}
-		return serialized;
-	}
-
-	/**
-	 * How to deserialize the node
-	 * @param serialized
-	 * @returns
-	 */
-	public static async deserialize(opts: IDeserializeOpts): Promise<Node> {
-		const newNode = new this({
-			id: opts.serialized.id,
-			...opts
-		});
-
-		newNode.annotations = opts.serialized.annotations || {};
-
-		//Set the values directly from the save values
-		opts.serialized.inputs.forEach(input => {
-			//Attempt a lookup by  name
-			const foundInput = newNode.inputs[input.name];
-
-			if (!foundInput) {
-				//We need to create the input, it might be dynamic so we need to create it
-				newNode.inputs[input.name] = new Input({
-					name: input.name,
-					type: input.type,
-					variadic: input.variadic,
-					visible: input.visible,
-					value: input.value,
-					node: newNode,
-					annotations: input.annotations
-				});
-			} else {
-				//Set the value from the saved value
-				(foundInput as Input).deserialize?.(input);
-			}
-		});
-
-		return newNode;
-	}
-
-	public static getType = () => {
-		return this.type;
-	};
-
-	getAllInputs = (): UnwrapInput<this['inputs']> => {
-		return Object.fromEntries(
-			Object.entries(this.inputs as Record<string, Input>).map(
-				([key, value]) => [key, value.value]
-			)
-		) as UnwrapInput<this['inputs']>;
-	};
-
-	/**
-	 * Handles cleanup for nodes with state.
-	 * Use the super method to clear the graph reference
-	 *
-	 * @example
-	 * ```typescript
-	 * class MyNode extends Node {
-	 *  dispose() {
-	 *
-	 *   Node.prototype.dispose.call(this);
-	 *   // or if you have full ES6 support
-	 *   super.dispose();
-	 *
-	 *  //Some additional manual cleanup
-	 *  // ...
-	 * }
-	 */
-	dispose = () => {
-		//@ts-ignore This is forcing manual cleanup
-		this._graph = undefined;
-	};
-}
diff --git a/packages/graph-engine/src/programmatic/output.ts b/packages/graph-engine/src/programmatic/output.ts
index d82025c45..594917d97 100644
--- a/packages/graph-engine/src/programmatic/output.ts
+++ b/packages/graph-engine/src/programmatic/output.ts
@@ -1,14 +1,13 @@
 import { GraphSchema } from '../schemas/index.js';
 import { Input } from './input.js';
-import { Node } from './node.js';
 import { Port } from './port.js';
 import { action, makeObservable } from 'mobx';
+import type { Node } from './node.js';
 
 export interface IOutputProps<T = any> {
 	name: string;
 	type: GraphSchema;
 	value: T;
-	visible: boolean;
 	node: Node;
 }
 
@@ -19,7 +18,7 @@ export interface ConnectionStatus {
 	valid: boolean;
 }
 
-export class Output<T = any> extends Port<T> {
+export class Output<T = Node> extends Port<T> {
 	constructor(props: IOutputProps<T>) {
 		super(props);
 		makeObservable(this, {
@@ -57,7 +56,6 @@ export class Output<T = any> extends Port<T> {
 			name: this.name,
 			type: this.type,
 			value: this._value,
-			visible: this.visible,
 			node: this.node
 		});
 
diff --git a/packages/graph-engine/src/programmatic/port.ts b/packages/graph-engine/src/programmatic/port.ts
index 9df1ca3f4..c23227768 100644
--- a/packages/graph-engine/src/programmatic/port.ts
+++ b/packages/graph-engine/src/programmatic/port.ts
@@ -1,7 +1,7 @@
-import { Annotated } from './annotated.js';
+import { Annotated } from '../types/annotated.js';
 import { Edge } from './edge.js';
-import { Node } from './nodes/node.js';
 import { action, computed, makeObservable, observable } from 'mobx';
+import type { Node } from './node.js';
 
 export interface IPort<T extends Node> {
 	name: string;
diff --git a/packages/graph-engine/src/programmatic/annotated.ts b/packages/graph-engine/src/types/annotated.ts
similarity index 100%
rename from packages/graph-engine/src/programmatic/annotated.ts
rename to packages/graph-engine/src/types/annotated.ts
diff --git a/packages/graph-engine/src/types/annotations.ts b/packages/graph-engine/src/types/annotations.ts
new file mode 100644
index 000000000..e2d5cfeef
--- /dev/null
+++ b/packages/graph-engine/src/types/annotations.ts
@@ -0,0 +1 @@
+export type Annotations = Record<string, any>;
\ No newline at end of file
diff --git a/packages/graph-engine/src/graph/interfaces.ts b/packages/graph-engine/src/types/logger.ts
similarity index 100%
rename from packages/graph-engine/src/graph/interfaces.ts
rename to packages/graph-engine/src/types/logger.ts
diff --git a/packages/storybook-react/scripts/bridge.ts b/packages/storybook-react/scripts/bridge.ts
index 9e3a30ccc..b7730fc53 100644
--- a/packages/storybook-react/scripts/bridge.ts
+++ b/packages/storybook-react/scripts/bridge.ts
@@ -53,7 +53,7 @@ wss.on('connection', function connection(ws) {
 		);
 
 		const input = Object.values(graph.nodes).find(
-			x => x.nodeType() == 'studio.tokens.generic.input'
+			x => x.type == 'studio.tokens.generic.input'
 		);
 
 		if (!input) {
diff --git a/patches/react-virtualized+9.22.5.patch b/patches/react-virtualized+9.22.5.patch
deleted file mode 100644
index 68db8584c..000000000
--- a/patches/react-virtualized+9.22.5.patch
+++ /dev/null
@@ -1,11 +0,0 @@
-diff --git a/node_modules/react-virtualized/dist/es/WindowScroller/utils/onScroll.js b/node_modules/react-virtualized/dist/es/WindowScroller/utils/onScroll.js
-index d00f0f1..c8496e8 100644
---- a/node_modules/react-virtualized/dist/es/WindowScroller/utils/onScroll.js
-+++ b/node_modules/react-virtualized/dist/es/WindowScroller/utils/onScroll.js
-@@ -71,4 +71,3 @@ export function unregisterScrollListener(component, element) {
-     }
-   }
- }
-\ No newline at end of file
--import { bpfrpt_proptype_WindowScroller } from "../WindowScroller.js";
-\ No newline at end of file