@kiberon-labs/behave-graph-flow 1.0.0 → 3.0.0

package/src/components/panels/nodeInputs/OutputsGroup.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import styles from './index.module.css';
+import { EyeClosed, EyeSolid } from 'iconoir-react';
+import { Icon } from '@/components/primitives/icon';
+
+export interface OutputItem {
+  name: string;
+  valueType: string;
+  connected: boolean;
+}
+
+interface OutputsGroupProps {
+  outputs: OutputItem[];
+  hiddenOutputs?: Record<string, boolean>;
+  onToggleOutput?: (outputName: string) => void;
+}
+
+export const OutputsGroup: React.FC<OutputsGroupProps> = ({
+  outputs,
+  hiddenOutputs = {},
+  onToggleOutput
+}) => {
+  if (outputs.length === 0) return null;
+  return (
+    <div className={styles.stackColPadded}>
+      {outputs.map((output) => {
+        const isHidden = hiddenOutputs[output.name] ?? false;
+
+        return (
+          <div key={output.name} className={styles.inputWithToggle}>
+            {onToggleOutput && (
+              <Icon
+                className={styles.inputToggle}
+                onClick={() => onToggleOutput(output.name)}
+                title={isHidden ? 'Show output on node' : 'Hide output on node'}
+              >
+                {isHidden ? <EyeClosed /> : <EyeSolid />}
+              </Icon>
+            )}
+            <div className={styles.inputControlWrapper}>
+              <div className={styles.inputRow}>
+                <div className={styles.inputMeta}>
+                  <div className={styles.inputName} title={output.valueType}>
+                    {output.name}
+                  </div>
+                  <div className={styles.inputSubtext}>{output.valueType}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};

package/src/components/panels/nodeInputs/SocketGenerators.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { VscodeCollapsible } from '@vscode-elements/react-elements';
+import type {
+  SocketGenerator,
+  SocketGeneratorNode
+} from '@/store/socketGenerator';
+import styles from './index.module.css';
+
+interface SocketGeneratorsProps {
+  generators: SocketGenerator[];
+  generatorNode: SocketGeneratorNode;
+}
+
+export const SocketGenerators: React.FC<SocketGeneratorsProps> = ({
+  generators,
+  generatorNode
+}) => {
+  if (generators.length === 0) return null;
+
+  return (
+    <VscodeCollapsible title="Socket Generator" open>
+      <div className={styles.stackColPadded}>
+        {generators.map((generator) => {
+          const GeneratorRenderer = generator.render;
+          return (
+            <GeneratorRenderer key={generator.name} node={generatorNode} />
+          );
+        })}
+      </div>
+    </VscodeCollapsible>
+  );
+};

package/src/components/panels/nodeInputs/index.module.css

@@ -0,0 +1,308 @@
+.panel {
+    display: flex;
+    flex: 1 1 0%;
+    flex-direction: column;
+    gap: 0.5rem;
+    height: 100%;
+    padding: 0.5rem;
+}
+
+.listGap1 {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}
+
+.stackGap2 {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.sectionTitle {
+    font-size: 1.05em;
+    font-weight: 600;
+}
+
+.nodeCard {
+    padding: 0.5rem;
+    border: 1px solid var(--color-neutral-stroke-subtle);
+    border-radius: var(--component-spacing-xs);
+}
+
+.nodeCardTitle {
+    font-weight: bold;
+    font-size: 0.9em;
+}
+
+.nodeCardMeta {
+    font-size: 0.8em;
+    opacity: 0.7;
+}
+
+.emptyState {
+    font-size: var(--fs-desc, 0.72rem);
+    color: var(--ds-fg-muted);
+    text-align: center;
+    padding: 2rem 1rem;
+    line-height: 1.4;
+}
+
+.panelTitle {
+    font-size: 0.95rem;
+    text-align: left;
+    font-weight: 600;
+    cursor: text;
+    flex: 1;
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.panelTitleContainer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 0.4rem;
+    position: relative;
+}
+
+.nodeTitleIcon {
+    width: 20px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    opacity: 0.8;
+}
+
+.nodeTitleIcon svg,
+.nodeTitleIcon img {
+    width: 18px;
+    height: 18px;
+}
+
+.infoButton {
+    opacity: 0.5;
+    transition: opacity 0.2s;
+    padding: 0.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    border-radius: 0.25rem;
+    background: transparent;
+    border: none;
+    color: var(--colors-fg);
+}
+
+.infoButton:hover {
+    background: var(--ds-button-secondary-bg, #313131);
+    opacity: 1 !important;
+}
+
+.infoButton svg {
+    width: 16px;
+    height: 16px;
+}
+
+.panelTitleEdit {
+    display: flex;
+    justify-content: center;
+}
+
+.panelTitleTextfield {
+    width: 100%;
+}
+
+.tabs {
+    width: 100%;
+}
+
+.panelId {
+    font-size: var(--fs-desc, 0.72rem);
+    color: var(--ds-fg-muted);
+    opacity: 0.8;
+    text-align: left;
+    font-weight: 400;
+    font-variant-numeric: tabular-nums;
+    margin-bottom: 0.25rem;
+}
+
+.toolbar {
+    width: 100%;
+}
+
+.noInputs {
+    font-size: var(--fs-desc, 0.72rem);
+    color: var(--ds-fg-muted);
+    padding: 0.75rem 0.2em;
+}
+
+.stackColPadded {
+    display: flex;
+    flex-direction: column;
+    padding: 0.2em;
+}
+
+.inputRow {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    padding: 0.25rem 0.2em;
+}
+
+/* Control fills the row width below the label, VSCode-settings style */
+.inputRow > div:last-child {
+    width: 100%;
+}
+
+.inputMeta {
+    display: flex;
+    align-items: baseline;
+    gap: 0.4rem;
+}
+
+.inputName {
+    font-size: var(--fs-label, 0.8rem);
+    font-weight: 600;
+    text-transform: capitalize;
+}
+
+.inputSubtext {
+    font-size: var(--fs-desc, 0.72rem);
+    color: var(--ds-fg-muted);
+    opacity: 0.8;
+}
+
+.connectedMessage {
+    font-size: var(--fs-desc, 0.72rem);
+    color: var(--ds-fg-muted);
+}
+
+.stackGap2Padded {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 0.2em;
+}
+
+/* Shared compact uppercase sub-section label for the Settings tab */
+.subTitle {
+    font-size: var(--fs-section, 0.7rem);
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--ds-fg);
+    opacity: 0.65;
+}
+
+.settingsRow {
+    display: flex;
+    justify-content: space-between;
+    gap: 0.4em;
+    font-size: var(--fs-label, 0.8rem);
+}
+
+.settingsRow > div:first-child {
+    color: var(--ds-fg-muted);
+}
+
+.settingsRow > div:last-child {
+    min-width: 0;
+    text-align: right;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-variant-numeric: tabular-nums;
+}
+
+.descriptionSection {
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+}
+
+.descriptionTextarea {
+    width: 100%;
+}
+
+.annotationsSection {
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+}
+
+.annotationsEmpty {
+    font-size: var(--fs-desc, 0.72rem);
+    color: var(--ds-fg-muted);
+}
+
+.annotationsValue {
+    font-size: var(--fs-desc, 0.72rem);
+}
+
+.annotationsList {
+    margin: 0;
+    padding-left: 1.25rem;
+}
+
+.annotationsListItem {
+    font-size: var(--fs-desc, 0.72rem);
+}
+
+.annotationsPre {
+    margin: 0;
+    padding: 0.5rem;
+    border: 1px solid var(--color-neutral-stroke-subtle);
+    border-radius: var(--component-radii-sm, 4px);
+    background: var(--color-neutral-background-strong);
+    font-size: var(--fs-desc, 0.72rem);
+    overflow: auto;
+    white-space: pre-wrap;
+    word-break: break-word;
+}
+
+.panelHeader {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.25rem 0.2em;
+    margin-bottom: 0.25rem;
+    border-bottom: 1px solid var(--color-neutral-stroke-subtle);
+}
+
+.panelHeaderLabel {
+    font-size: var(--fs-section, 0.7rem);
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--ds-fg);
+    opacity: 0.65;
+}
+
+
+
+.inputWithToggle {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.25rem;
+}
+
+/* Per-input visibility toggle: subtle by default, full strength on row hover */
+.inputToggle {
+    opacity: 0.45;
+    transition: opacity 0.1s ease;
+}
+
+.inputWithToggle:hover .inputToggle,
+.inputToggle:focus-visible {
+    opacity: 1;
+}
+
+.inputControlWrapper {
+    flex: 1;
+    min-width: 0;
+}