port-suggestion-menu

packages/graph-editor/src/components/flow/portSuggestionMenu.module.css

@@ -0,0 +1,62 @@
+.menuContainer {
+  position: fixed;
+  z-index: 9999;
+  background: var(--color-neutral-canvas-minimal-bg);
+  color: var(--color-neutral-canvas-minimal-fg);
+  padding: var(--component-spacing-xs);
+  border-radius: var(--component-radii-md);
+  box-shadow: var(--shadow);
+  min-width: 300px;
+  font: var(--font-body-md-default);
+}
+
+.searchContainer {
+  padding: var(--size-100);
+}
+
+.searchInput {
+  width: 100%;
+  padding: var(--size-100);
+  background: var(--color-neutral-surface-sunken);
+  border: 1px solid var(--color-neutral-stroke-subtle);
+  border-radius: var(--radius-small);
+  color: var(--color-neutral-foreground-default);
+  outline: none;
+}
+
+.searchInput:focus {
+  border-color: var(--color-accent-stroke-focus);
+}
+
+.portList {
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.portGroup {
+  margin-bottom: var(--size-100);
+}
+
+.portItem {
+  padding: var(--component-spacing-xs);
+  cursor: pointer;
+  border-radius: var(--radius-small);
+  transition: background-color 0.2s;
+}
+
+.portItem:hover {
+  background-color: var(--color-neutral-surface-hover);
+}
+
+.portName {
+  color: var(--color-accent-foreground-default);
+}
+
+.separator {
+  color: var(--color-neutral-foreground-subtle);
+  margin: 0 var(--size-50);
+}
+
+.nodeTitle {
+  color: var(--color-neutral-canvas-minimal-fg-subtle);
+} 

packages/graph-editor/src/components/flow/portSuggestionMenu.tsx

@@ -0,0 +1,90 @@
+import { Port } from '@tokens-studio/graph-engine';
+import { PortInfo } from '../../services/PortRegistry.js';
+import { createPortal } from 'react-dom';
+import { observer } from 'mobx-react-lite';
+import React, { useCallback, useState } from 'react';
+import clsx from 'clsx';
+import styles from './portSuggestionMenu.module.css';
+
+interface PortSuggestionMenuProps {
+  sourcePort: Port;
+  compatiblePorts: PortInfo[];
+  position: { x: number; y: number };
+  onSelect: (portInfo: PortInfo) => void;
+}
+
+export const PortSuggestionMenu = observer(
+  ({ compatiblePorts, position, onSelect }: PortSuggestionMenuProps) => {
+    const [searchTerm, setSearchTerm] = useState('');
+
+    const handleSelect = useCallback(
+      (portInfo: PortInfo) => {
+        onSelect(portInfo);
+      },
+      [onSelect]
+    );
+
+    if (compatiblePorts.length === 0) {
+      return null;
+    }
+
+    // Filter ports based on search term
+    const filteredPorts = compatiblePorts.filter(port => 
+      port.portName.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      port.nodeTitle.toLowerCase().includes(searchTerm.toLowerCase())
+    );
+
+    // Group ports by node type
+    const groupedPorts = filteredPorts.reduce<Record<string, PortInfo[]>>(
+      (acc, port) => {
+        if (!acc[port.nodeTitle]) {
+          acc[port.nodeTitle] = [];
+        }
+        acc[port.nodeTitle].push(port);
+        return acc;
+      },
+      {}
+    );
+
+    return createPortal(
+      <div
+        className={clsx(styles.menuContainer, 'canvas')}
+        data-appearance="neutral"
+        data-emphasis="minimal"
+        style={{
+          left: position.x,
+          top: position.y,
+        }}
+      >
+        <div className={styles.searchContainer}>
+          <input
+            type="text"
+            placeholder="Search ports..."
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className={styles.searchInput}
+            autoFocus
+          />
+        </div>
+        <div className={styles.portList}>
+          {Object.entries(groupedPorts).map(([nodeTitle, ports]) => (
+            <>
+              {ports.map((portInfo) => (
+                <div
+                  key={`${portInfo.nodeType}-${portInfo.portName}`}
+                  onClick={() => handleSelect(portInfo)}
+                  className={styles.portItem}
+                >
+                  <span className={styles.portName}>{portInfo.portName}</span>
+                  <span className={styles.separator}>▸</span>
+                  <span className={styles.nodeTitle}>{portInfo.nodeTitle}</span>
+                </div>
+              ))}
+            </>
+          ))}
+        </div>
+      </div>,
+      document.body
+    );
+  }
+); 

packages/graph-editor/src/data/version.ts

@@ -1 +1 @@
-export const version = '4.3.8';
+export const version = '4.3.9';