feat: show different ui when inside group

app/src/lib/graph-interface/graph-manager.svelte.ts

@@ -559,9 +559,9 @@ export class GraphManager extends EventEmitter<{
           label: '',
           value: node.props?.groupId,
           internal: true,
-          options: this.graph.groups.map((g, i) => ({
+          options: this.graph.groups.map((g) => ({
             value: g.id,
-            label: g.name || `Group ${i + 1}`
+            label: g.name || `Group#${g.id}`
           }))
         },
         ...defaultInputs
@@ -863,7 +863,7 @@ export class GraphManager extends EventEmitter<{
       inputs[`input_${i}`] = input as NodeInput;
     });
 
-    const outputs = [...groupOutputs.values()].map((edge, i) => ({
+    const outputs = [groupOutputs.values().next().value!].map((edge, i) => ({
       label: `Output ${i}`,
       type: edge[2].state.type?.inputs?.[edge[3]].type || '*'
     }));

app/src/lib/graph-interface/graph/Graph.svelte

@@ -154,8 +154,11 @@
   <label for="drop-zone"></label>
 
   {#if graph.isInsideGroup}
-    <button class="exit-group" onclick={() => graphState.exitGroupNode()}>
+    <button
-      ↑ Exit Group
+      class="exit-group flex items-center gap-1 p-1 text-sm px-2 bg-layer-2"
+      onclick={() => graphState.exitGroupNode()}
+    >
+      <span class="i-[tabler--arrow-left]"></span>Exit Group
     </button>
     <p class="group-name absolute">
       Group <b>{getGroupName()}</b>
@@ -283,13 +286,9 @@
     position: absolute;
     top: 12px;
     left: 12px;
-    z-index: 1000;
+    z-index: 10;
-    padding: 4px 12px;
-    background: var(--color-layer-2);
     border: 1px solid var(--stroke);
     border-radius: 4px;
-    color: inherit;
-    font-size: 0.85em;
     cursor: pointer;
     opacity: 0.85;
   }

app/src/lib/settings/NestedSettings.svelte

@@ -204,6 +204,13 @@
 
   .input-boolean > label {
     order: 2;
+    font-size: 1em;
+    opacity: 0.9;
+  }
+
+  label {
+    font-size: 0.8em;
+    opacity: 0.7;
   }
 
   .first-level.input {

app/src/lib/sidebar/panels/GroupSettings.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { GraphManager } from '$lib/graph-interface/graph-manager.svelte';
   import type { NodeInstance } from '@nodarium/types';
+  import InputSelect from '../../../../../packages/ui/src/lib/inputs/InputSelect.svelte';
 
   type Props = {
     manager: GraphManager;
@@ -55,6 +56,22 @@
         value={groupName}
         oninput={handleRename}
       />
+
+      <label for="group-name">Group Inputs</label>
+      <div>
+        {#each Object.keys(activeGroup?.inputs ?? {}) as key (key)}
+          <div class="flex">
+            <InputSelect
+              value={activeGroup.inputs?.[key].type}
+              options={['seed', 'float', 'boolean']}
+            />
+            <input type="text" placeholder="Input {key}" />
+            <button>
+              🥊
+            </button>
+          </div>
+        {/each}
+      </div>
     </div>
   {/key}
 {/if}

app/src/routes/+page.svelte

@@ -259,7 +259,7 @@
           graph={pm.graph}
           bind:this={graphInterface}
           registry={nodeRegistry}
-          safePadding={{ right: sidebarOpen ? 320 : undefined }}
+          safePadding={{ right: sidebarOpen ? 321 : undefined }}
           backgroundType={appSettings.value.nodeInterface.backgroundType}
           snapToGrid={appSettings.value.nodeInterface.snapToGrid}
           bind:activeNode