A whole lotta things

src/lib/components/ComfyApp.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
  import { onMount } from "svelte";
  import { Pane, Splitpanes } from 'svelte-splitpanes';
- import { Tabs } from '@svelteuidev/core';
  import { Backpack, Gear } from 'radix-icons-svelte';
+ import ComfyUIPane from "./ComfyUIPane.svelte";
  import ComfyApp from "./ComfyApp";
 
+ import { LGraphNode } from "litegraph.js";
+
  let app: ComfyApp = undefined;
+ let uiPane: ComfyUIPane = undefined;
 
  function refreshView(event) {
      app.resizeCanvas();
@@ -13,6 +16,23 @@
 
  onMount(async () => {
      app = new ComfyApp();
+
+     app.eventBus.on("nodeAdded", (node: LGraphNode) => {
+         uiPane.addNodeUI(node);
+     });
+
+     app.eventBus.on("nodeRemoved", (node: LGraphNode) => {
+         uiPane.removeNodeUI(node);
+     });
+
+     app.eventBus.on("configured", (graph: LGraph) => {
+         uiPane.configureFinished(graph);
+     });
+
+     app.eventBus.on("cleared", () => {
+         uiPane.clear();
+     });
+
      await app.setup();
      refreshView();
 
@@ -20,25 +40,26 @@
  })
 </script>
 
-<Tabs>
-    <Tabs.Tab label="Workspace" icon={Backpack}>
-        <div id="container">
-            <Splitpanes on:resize={refreshView}>
-                <Pane class="sidebar" size={20} minSize={20}>I have a min width of 20%</Pane>
-                <Pane>
-                    <Splitpanes on:resize={refreshView} horizontal="{true}">
-                        <Pane minSize={15}>I have a min height of 15%</Pane>
-                        <Pane minSize={10}>
-                            <canvas id="graph-canvas" />
-                        </Pane>
-                    </Splitpanes>
+<div id="dropzone" class="dropzone"></div>
+<div id="container">
+    <Splitpanes theme="comfy" on:resize={refreshView}>
+        <Pane size={20} minSize={10}>
+            <div>
+                Sidebar
+            </div>
+        </Pane>
+        <Pane>
+            <Splitpanes theme="comfy" on:resize={refreshView} horizontal="{true}">
+                <Pane minSize={15}>
+                    <ComfyUIPane bind:this={uiPane} {app} />
+                </Pane>
+                <Pane minSize={10}>
+                    <canvas id="graph-canvas" />
                 </Pane>
             </Splitpanes>
-        </div>
-    </Tabs.Tab>
-    <Tabs.Tab label="Settings" icon={Gear}>
-    </Tabs.Tab>
-</Tabs>
+        </Pane>
+    </Splitpanes>
+</div>
 
 <style>
  #container {
@@ -47,24 +68,6 @@
      width: 100%;
  }
 
- .panel {
-     overflow: auto;
-     position: relative;
- }
-
- .resizer[data-direction='horizontal'] {
-     background-color: #cbd5e0;
-     cursor: ew-resize;
-     height: 100%;
-     width: 2px;
- }
- .resizer[data-direction='vertical'] {
-     background-color: #cbd5e0;
-     cursor: ns-resize;
-     height: 2px;
-     width: 100%;
- }
-
  #comfy-content {
      grid-area: content;
      height: 100vh;
@@ -81,6 +84,19 @@
      height: 100%;
  }
 
+ .dropzone {
+     box-sizing: border-box;
+     display: none;
+     position: fixed;
+     width: 100%;
+     height: 100%;
+     left: 0;
+     top: 0;
+     z-index: 99999;
+     background: #60a7dc80;
+     border: 4px dashed #60a7dc;
+ }
+
  :global(html, body) {
      width: 100%;
      height: 100%;
@@ -88,6 +104,20 @@
      font-family: Arial;
  }
 
+ :global(.splitpanes.comfy.splitpanes--horizontal>.splitpanes__splitter) {
+     min-height: 20px;
+     cursor: row-resize;
+ }
+
+ :global(.splitpanes.comfy.splitpanes--vertical>.splitpanes__splitter) {
+     min-width: 20px;
+     cursor: col-resize;
+ }
+
+ :global(.splitpanes.comfy) {
+     max-height: calc(100vh - 60px);
+ }
+
  :global(.splitpanes__pane) {
      box-shadow: 0 0 3px rgba(0, 0, 0, .2) inset;
      justify-content: center;