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

package/src/components/panels/systemSettings/ConversionsSettings.tsx

@@ -0,0 +1,203 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { useStore } from 'zustand';
+import {
+  VscodeButton,
+  VscodeOption,
+  VscodeSingleSelect
+} from '@vscode-elements/react-elements';
+import { Trash } from 'iconoir-react';
+import { useSystem } from '@/system/provider';
+import styles from './styles.module.css';
+
+/**
+ * Editor for the custom automatic type conversions used by auto-convert. Rules
+ * defined here override the generic spec-derived defaults and are persisted with
+ * the editor settings.
+ *
+ * A rule pins the converter node AND the specific ports to wire: which input
+ * receives the `from` value and which output produces the `to` value. The port
+ * choices are filtered to type-compatible sockets, so converter nodes with more
+ * than one input/output resolve unambiguously.
+ */
+export const ConversionsSettings: React.FC = () => {
+  const sys = useSystem();
+  const values = useStore(sys.registry, (s) => s.values);
+  const specs = useStore(sys.specStore, (s) => s.specs);
+  const conversions = useStore(sys.conversionStore, (s) => s.conversions);
+
+  const valueTypes = useMemo(
+    () => Object.keys(values).filter((t) => t !== 'flow'),
+    [values]
+  );
+  const nodeTypes = useMemo(() => specs.map((s) => s.type).sort(), [specs]);
+
+  const [from, setFrom] = useState('');
+  const [to, setTo] = useState('');
+  const [nodeType, setNodeType] = useState('');
+  const [inputKey, setInputKey] = useState('');
+  const [outputKey, setOutputKey] = useState('');
+
+  const selectedSpec = useMemo(
+    () => specs.find((s) => s.type === nodeType),
+    [specs, nodeType]
+  );
+
+  // Only ports whose type matches the conversion endpoints are valid targets:
+  // the spliced node must accept `from` and emit `to`.
+  const inputPorts = useMemo(
+    () =>
+      (selectedSpec?.inputs ?? []).filter(
+        (i) => i.valueType !== 'flow' && (!from || i.valueType === from)
+      ),
+    [selectedSpec, from]
+  );
+  const outputPorts = useMemo(
+    () =>
+      (selectedSpec?.outputs ?? []).filter(
+        (o) => o.valueType !== 'flow' && (!to || o.valueType === to)
+      ),
+    [selectedSpec, to]
+  );
+
+  // Default the port selection to the first compatible socket whenever the node
+  // or endpoints change; the user can still override when several ports match.
+  useEffect(() => {
+    setInputKey(inputPorts[0]?.name ?? '');
+  }, [inputPorts]);
+  useEffect(() => {
+    setOutputKey(outputPorts[0]?.name ?? '');
+  }, [outputPorts]);
+
+  const nodeChosen = Boolean(nodeType);
+  const portsMissing =
+    nodeChosen && (inputPorts.length === 0 || outputPorts.length === 0);
+  const canAdd =
+    Boolean(from && to && nodeType && inputKey && outputKey) && from !== to;
+
+  const add = () => {
+    if (!canAdd) return;
+    sys.conversionStore
+      .getState()
+      .registerConversion({ from, to, nodeType, inputKey, outputKey });
+    setFrom('');
+    setTo('');
+    setNodeType('');
+    setInputKey('');
+    setOutputKey('');
+  };
+
+  return (
+    <div className={styles.conversions}>
+      <span className={styles.conversionsLabel}>
+        Custom rules override the built-in defaults.
+      </span>
+      {conversions.length === 0 && (
+        <div className={styles.empty}>No custom conversions.</div>
+      )}
+      {conversions.map((rule) => (
+        <div key={`${rule.from}->${rule.to}`} className={styles.rule}>
+          <span className={styles.ruleText}>
+            {rule.from} → {rule.to}{' '}
+            <span className={styles.ruleNode}>
+              ({rule.nodeType}
+              {rule.inputKey && rule.outputKey
+                ? `: ${rule.inputKey} → ${rule.outputKey}`
+                : ''}
+              )
+            </span>
+          </span>
+          <VscodeButton
+            secondary
+            iconOnly
+            title="Remove"
+            onClick={() =>
+              sys.conversionStore
+                .getState()
+                .removeConversion(rule.from, rule.to)
+            }
+          >
+            <Trash />
+          </VscodeButton>
+        </div>
+      ))}
+
+      <div className={styles.addForm}>
+        <VscodeSingleSelect
+          value={from}
+          onChange={(e: any) => setFrom(String(e?.target?.value ?? ''))}
+        >
+          <VscodeOption value="">from…</VscodeOption>
+          {valueTypes.map((t) => (
+            <VscodeOption key={t} value={t}>
+              {t}
+            </VscodeOption>
+          ))}
+        </VscodeSingleSelect>
+        <VscodeSingleSelect
+          value={to}
+          onChange={(e: any) => setTo(String(e?.target?.value ?? ''))}
+        >
+          <VscodeOption value="">to…</VscodeOption>
+          {valueTypes.map((t) => (
+            <VscodeOption key={t} value={t}>
+              {t}
+            </VscodeOption>
+          ))}
+        </VscodeSingleSelect>
+        <VscodeSingleSelect
+          value={nodeType}
+          onChange={(e: any) => setNodeType(String(e?.target?.value ?? ''))}
+        >
+          <VscodeOption value="">converter node…</VscodeOption>
+          {nodeTypes.map((t) => (
+            <VscodeOption key={t} value={t}>
+              {t}
+            </VscodeOption>
+          ))}
+        </VscodeSingleSelect>
+
+        {nodeChosen && !portsMissing && (
+          <>
+            <VscodeSingleSelect
+              value={inputKey}
+              onChange={(e: any) => setInputKey(String(e?.target?.value ?? ''))}
+            >
+              <VscodeOption value="">input port…</VscodeOption>
+              {inputPorts.map((p) => (
+                <VscodeOption key={p.name} value={p.name}>
+                  {p.name} ({p.valueType})
+                </VscodeOption>
+              ))}
+            </VscodeSingleSelect>
+            <VscodeSingleSelect
+              value={outputKey}
+              onChange={(e: any) =>
+                setOutputKey(String(e?.target?.value ?? ''))
+              }
+            >
+              <VscodeOption value="">output port…</VscodeOption>
+              {outputPorts.map((p) => (
+                <VscodeOption key={p.name} value={p.name}>
+                  {p.name} ({p.valueType})
+                </VscodeOption>
+              ))}
+            </VscodeSingleSelect>
+          </>
+        )}
+
+        {portsMissing && (
+          <span className={styles.empty}>
+            “{nodeType}” has no {inputPorts.length === 0 ? `${from} input` : ''}
+            {inputPorts.length === 0 && outputPorts.length === 0 ? ' / ' : ''}
+            {outputPorts.length === 0 ? `${to} output` : ''} , not a valid
+            converter for {from} → {to}.
+          </span>
+        )}
+
+        <VscodeButton secondary disabled={!canAdd} onClick={add}>
+          + Add conversion
+        </VscodeButton>
+      </div>
+    </div>
+  );
+};

package/src/components/panels/systemSettings/index.tsx

@@ -1,206 +1,251 @@
-import { useSystem } from '@/system/provider';
-import {
-  EDGE_TYPE,
-  LAYOUT_TYPE,
-  type EdgeType,
-  type LayoutType
-} from '@/store/settings';
-
+import { Fragment, useMemo, useState } from 'react';
+import { useStore } from 'zustand';
 import {
   VscodeCheckbox,
   VscodeDivider,
-  VscodeLabel,
   VscodeOption,
-  VscodeSingleSelect
+  VscodeSingleSelect,
+  VscodeTextfield
 } from '@vscode-elements/react-elements';
-import { useStore } from 'zustand';
+import { Undo } from 'iconoir-react';
+import { useSystem } from '@/system/provider';
+import type { SettingDescriptor, SettingsValues } from '@/store/settingsSchema';
 import styles from './styles.module.css';
 import { BasePanel } from '../base';
+import { SectionTitle } from '../common/SectionTitle';
+import { ConversionsSettings } from './ConversionsSettings';
 
-const EdgeValues = Object.values(EDGE_TYPE);
-const LayoutValues = Object.values(LAYOUT_TYPE);
-
-const SectionTitle = ({ children }: { children: React.ReactNode }) => {
-  return <div className={styles.title}>{children}</div>;
+type RowProps = {
+  descriptor: SettingDescriptor;
+  value: unknown;
+  setValue: (value: unknown) => void;
 };
 
-const Description = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <div
-      style={{
-        fontSize: '0.85em',
-        color: 'var(--vscode-descriptionForeground)',
-        opacity: 0.9
-      }}
-    >
-      {children}
-    </div>
-  );
+/** The input control for a descriptor, chosen by its `type`. */
+const SettingControl = ({ descriptor, value, setValue }: RowProps) => {
+  switch (descriptor.type) {
+    case 'boolean':
+      return (
+        <VscodeCheckbox
+          checked={Boolean(value)}
+          onChange={(e: any) => setValue(Boolean(e?.target?.checked))}
+        />
+      );
+    case 'enum':
+      return (
+        <VscodeSingleSelect
+          value={String(value ?? '')}
+          onChange={(e: any) => {
+            const next = e?.target?.value as string | undefined;
+            if (next !== undefined) setValue(next);
+          }}
+        >
+          {descriptor.options.map((option) => (
+            <VscodeOption key={option.value} value={option.value}>
+              {option.label}
+            </VscodeOption>
+          ))}
+        </VscodeSingleSelect>
+      );
+    case 'number':
+      return (
+        <VscodeTextfield
+          type="number"
+          value={String(value ?? '')}
+          min={descriptor.min}
+          max={descriptor.max}
+          step={descriptor.step}
+          style={{ width: '100%' }}
+          onChange={(e: any) => {
+            const next = Number(e?.target?.value);
+            if (!Number.isNaN(next)) setValue(next);
+          }}
+        />
+      );
+    case 'string':
+      return (
+        <VscodeTextfield
+          value={String(value ?? '')}
+          placeholder={descriptor.placeholder}
+          style={{ width: '100%' }}
+          onChange={(e: any) => setValue(String(e?.target?.value ?? ''))}
+        />
+      );
+    case 'custom': {
+      const Render = descriptor.render;
+      return (
+        <Render value={value} setValue={setValue} descriptor={descriptor} />
+      );
+    }
+  }
 };
 
-const SelectSetting = ({
-  label,
-  description,
-  value,
-  onChange,
-  children
+const ResetButton = ({ onClick }: { onClick: () => void }) => (
+  <button
+    type="button"
+    className={styles.reset}
+    title="Reset to default"
+    aria-label="Reset to default"
+    onClick={onClick}
+  >
+    <Undo width={13} height={13} />
+  </button>
+);
+
+const Label = ({
+  descriptor,
+  modified
 }: {
-  label: string;
-  description: React.ReactNode;
-  value: string;
-  onChange: (value: string) => void;
-  children: React.ReactNode;
-}) => {
-  return (
-    <div className="flex flex-col gap-1 justify-start">
-      <VscodeLabel>{label}</VscodeLabel>
-      <Description>{description}</Description>
-      <VscodeSingleSelect
-        value={value}
-        onChange={(e: any) => {
-          const next = e?.target?.value as string | undefined;
-          if (next) onChange(next);
-        }}
-      >
-        {children}
-      </VscodeSingleSelect>
-    </div>
-  );
-};
+  descriptor: SettingDescriptor;
+  modified: boolean;
+}) => (
+  <span className={styles.label}>
+    {descriptor.title}
+    {modified && <span className={styles.modified} title="Modified" />}
+  </span>
+);
+
+/** A single auto-generated setting row. Booleans put the control inline with the
+ *  label (toggle layout); other types stack the control under the label. */
+const SettingRow = ({ descriptor, value, setValue }: RowProps) => {
+  const modified = descriptor.type !== 'custom' && value !== descriptor.default;
+  const reset = () => setValue(descriptor.default);
+
+  if (descriptor.type === 'custom') {
+    return (
+      <div className={styles.setting}>
+        {descriptor.title && (
+          <span className={styles.label}>{descriptor.title}</span>
+        )}
+        {descriptor.description && (
+          <span className={styles.description}>{descriptor.description}</span>
+        )}
+        <SettingControl
+          descriptor={descriptor}
+          value={value}
+          setValue={setValue}
+        />
+      </div>
+    );
+  }
+
+  if (descriptor.type === 'boolean') {
+    return (
+      <div className={`${styles.setting} ${styles.toggle}`}>
+        <SettingControl
+          descriptor={descriptor}
+          value={value}
+          setValue={setValue}
+        />
+        <div className={styles.body}>
+          <Label descriptor={descriptor} modified={modified} />
+          {descriptor.description && (
+            <span className={styles.description}>{descriptor.description}</span>
+          )}
+        </div>
+        {modified && <ResetButton onClick={reset} />}
+      </div>
+    );
+  }
 
-const ToggleSetting = ({
-  label,
-  description,
-  checked,
-  onChange
-}: {
-  label: string;
-  description: React.ReactNode;
-  checked: boolean;
-  onChange: (checked: boolean) => void;
-}) => {
   return (
-    <div className="flex gap-2 justify-start">
-      <VscodeCheckbox
-        toggle
-        checked={checked}
-        onChange={(event: any) => onChange(Boolean(event?.target?.checked))}
-      />
-      <div className="flex flex-col justify-start gap-0.5">
-        <VscodeLabel>{label}</VscodeLabel>
-        <Description>{description}</Description>
+    <div className={styles.setting}>
+      <div className={styles.labelRow}>
+        <Label descriptor={descriptor} modified={modified} />
+        {modified && <ResetButton onClick={reset} />}
       </div>
+      {descriptor.description && (
+        <span className={styles.description}>{descriptor.description}</span>
+      )}
+      <SettingControl
+        descriptor={descriptor}
+        value={value}
+        setValue={setValue}
+      />
     </div>
   );
 };
 
+/**
+ * Schema-driven Settings panel. Rows are auto-generated from the descriptor
+ * registry (`system.settingsSchema`) — built-in and plugin-contributed settings
+ * render through the same path — grouped by section, filterable, with reset.
+ */
 export const Settings = () => {
   const system = useSystem();
-
-  const settings = useStore(system.systemSettings);
+  const descriptors = useStore(system.settingsSchema, (s) => s.settings);
+  const sectionOrder = useStore(system.settingsSchema, (s) => s.sectionOrder);
+  const values = useStore(system.systemSettings) as SettingsValues & {
+    setSetting: (key: string, value: unknown) => void;
+  };
+  const [query, setQuery] = useState('');
+
+  const bySection = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    const matches = (d: SettingDescriptor) =>
+      !q ||
+      [d.title, d.description, d.section, d.key].some(
+        (field) => typeof field === 'string' && field.toLowerCase().includes(q)
+      );
+    const visible = (d: SettingDescriptor) => (d.when ? d.when(values) : true);
+
+    const map = new Map<string, SettingDescriptor[]>();
+    for (const descriptor of descriptors) {
+      if (!matches(descriptor) || !visible(descriptor)) continue;
+      const rows = map.get(descriptor.section) ?? [];
+      rows.push(descriptor);
+      map.set(descriptor.section, rows);
+    }
+    for (const rows of map.values()) {
+      rows.sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+    }
+    return map;
+  }, [descriptors, query, values]);
+
+  const visibleSections = sectionOrder.filter(
+    (section) => (bySection.get(section)?.length ?? 0) > 0
+  );
 
   return (
     <BasePanel>
-      <div className="flex flex-col gap-3">
-        <SectionTitle>Layout</SectionTitle>
-        <SelectSetting
-          label="Edge Type"
-          description="Select the type of edge to use in the graph editor."
-          value={settings.edgeType}
-          onChange={(value) => settings.setEdgeType(value as EdgeType)}
-        >
-          <VscodeOption value="">Select an edge type...</VscodeOption>
-          {EdgeValues.map((type) => (
-            <VscodeOption key={type} value={type}>
-              {type}
-            </VscodeOption>
-          ))}
-        </SelectSetting>
-
-        <SelectSetting
-          label="Layout Type"
-          description="Select the type of layout engine to use in the graph editor."
-          value={settings.layoutType}
-          onChange={(value) => settings.setLayoutType(value as LayoutType)}
-        >
-          <VscodeOption value="">Select a layout type...</VscodeOption>
-          {LayoutValues.map((type) => (
-            <VscodeOption key={type} value={type}>
-              {type}
-            </VscodeOption>
-          ))}
-        </SelectSetting>
-
-        <VscodeDivider />
-
-        <SectionTitle>Accessibility</SectionTitle>
-        <ToggleSetting
-          label="Show inline types"
-          description={
-            'Adds additional spans to help differentiate types for colorblind users.'
-          }
-          checked={settings.inlineTypes}
-          onChange={(value) => settings.setInlineTypes(value)}
-        />
-
-        <VscodeDivider />
-
-        <SectionTitle>Interaction</SectionTitle>
-        <ToggleSetting
-          label="Use delayed interaction"
-          description={'Forces a user to click save to update port.'}
-          checked={settings.delayedUpdate}
-          onChange={(value) => settings.setDelayedUpdate(value)}
-        />
-        <ToggleSetting
-          label="Click to connect"
-          description={
-            'Allows you to quick connect nodes by clicking on the 2 port.'
-          }
-          checked={settings.connectOnClick}
-          onChange={(value) => settings.setConnectOnClick(value)}
-        />
-
-        <VscodeDivider />
-
-        <SectionTitle>Display</SectionTitle>
-        <ToggleSetting
-          label="Show inline values"
-          description={
-            'Shows values directly on the node. Useful for debugging but can be cluttered.'
-          }
-          checked={settings.inlineValues}
-          onChange={(value) => settings.setInlineValues(value)}
-        />
-        <ToggleSetting
-          label="Show Minimap"
-          description={'Shows the minimap in the graph editing area.'}
-          checked={settings.showMinimap}
-          onChange={(value) => settings.setShowMinimap(value)}
-        />
-        <ToggleSetting
-          label="Show Grid"
-          description={'Shows the grid in the graph editing area.'}
-          checked={settings.showGrid}
-          onChange={(value) => settings.setShowGrid(value)}
-        />
-        <ToggleSetting
-          label="Snap to Grid"
-          description={'Snaps nodes to the grid while dragging.'}
-          checked={settings.snapGrid}
-          onChange={(value) => settings.setSnapGrid(value)}
-        />
-
-        <VscodeDivider />
-
-        <SectionTitle>Performance</SectionTitle>
-        <ToggleSetting
-          label="Show execution time"
-          description={'Shows how long it takes for a node to process.'}
-          checked={settings.showTimings}
-          onChange={(value) => settings.setShowTimings(value)}
+      <div className={styles.searchRow}>
+        <VscodeTextfield
+          value={query}
+          placeholder="Search settings"
+          style={{ width: '100%' }}
+          onChange={(e: any) => setQuery(String(e?.target?.value ?? ''))}
         />
       </div>
+
+      {visibleSections.length === 0 ? (
+        <div className={styles.empty}>No settings match “{query}”.</div>
+      ) : (
+        <div className={styles.list}>
+          {visibleSections.map((section, index) => (
+            <Fragment key={section}>
+              {index > 0 && <VscodeDivider className={styles.divider} />}
+              <SectionTitle>{section}</SectionTitle>
+              {bySection.get(section)!.map((descriptor) => (
+                <Fragment key={descriptor.key}>
+                  <SettingRow
+                    descriptor={descriptor}
+                    // Fall back to the descriptor default so plugin-registered
+                    // settings (whose value is not seeded into the settings
+                    // store until first changed) show their real initial state.
+                    value={values[descriptor.key] ?? descriptor.default}
+                    setValue={(next) => values.setSetting(descriptor.key, next)}
+                  />
+                  {/* The conversions editor is a bespoke built-in control shown
+                      under Auto-convert when it is enabled. */}
+                  {descriptor.key === 'autoConvert' && values.autoConvert ? (
+                    <ConversionsSettings />
+                  ) : null}
+                </Fragment>
+              ))}
+            </Fragment>
+          ))}
+        </div>
+      )}
     </BasePanel>
   );
 };