feat(sdk) Variable enhancement

.changeset/sdk-variable-dynamic-control.md

@@ -0,0 +1,5 @@
+---
+'@workflowbuilder/sdk': minor
+---
+
+Added a new 'VariableDynamic' control that dynamically builds a control matching the variable's type. It toggles between a regular input and a variable picker limited to variables of the matching type; only a single variable can be set.

.changeset/sdk-variables-json-schema.md

@@ -0,0 +1,5 @@
+---
+'@workflowbuilder/sdk': patch
+---
+
+Variables now support returning different values for different source handles. Variables are now defined using a JSON schema rather than a flattened list, providing a foundation for future validation.

apps/demo/CLAUDE.md

@@ -12,7 +12,7 @@ Each node type lives in `src/app/data/nodes/<node-name>/`. Canonical pattern is
 
 | File                         | Purpose                                                                               |
 | ---------------------------- | ------------------------------------------------------------------------------------- |
-| `<node-name>.ts`             | `PaletteItem<Schema>` — label, type, icon, defaults, schemas, optional `outputSchema` |
+| `<node-name>.ts`             | `PaletteItem<Schema>` — label, type, icon, defaults, schemas, optional `schemaOutput` |
 | `schema.ts`                  | JSON Schema with `satisfies NodeSchema`; spreads `sharedProperties` from the SDK      |
 | `uischema.ts`                | UI Schema using `getScope<Schema>` for type-safe scopes                               |
 | `default-properties-data.ts` | Defaults aligned with the schema                                                      |

apps/demo/src/app/app.tsx

@@ -5,6 +5,8 @@ import type {
   WorkflowBuilderNodeTemplates,
   WorkflowBuilderReactFlowProps,
 } from '@workflowbuilder/sdk';
+import { showSnackbar } from '@workflowbuilder/sdk';
+import { SnackbarType } from '@workflowbuilder/ui';
 
 import '@workflowbuilder/sdk/style.css';
 
@@ -36,7 +38,18 @@ const edgeTemplates = {
 } satisfies WorkflowBuilderEdgeTemplates;
 
 // A start node is where the run begins, so it can never be a connection target.
-const isValidConnection: WorkflowBuilderIsValidConnection = ({ targetNode }) => !targetNode.data.isStartNode;
+const isValidConnection: WorkflowBuilderIsValidConnection = ({ targetNode }) => {
+  if (targetNode.data.isStartNode) {
+    showSnackbar({
+      title: 'notValidConnection',
+      variant: SnackbarType.WARNING,
+    });
+
+    return false;
+  }
+
+  return true;
+};
 
 // Advanced escape hatch: forward extra ReactFlow props (SDK-owned props can't be set here).
 const reactFlowProps = {

apps/demo/src/app/data/nodes/action/action.ts

@@ -2,6 +2,7 @@ import type { PaletteItem } from '@workflowbuilder/sdk';
 
 import { defaultPropertiesData } from './default-properties-data';
 import { type ActionNodeSchema, schema } from './schema';
+// import { schemaOutput } from './schema-output';
 import { uischema } from './uischema';
 
 export const action: PaletteItem<ActionNodeSchema> = {
@@ -11,7 +12,8 @@ export const action: PaletteItem<ActionNodeSchema> = {
   description: 'node.action.description',
   defaultPropertiesData,
   schema,
-  uischema,
+  // schemaOutput,
+  // Example of a deprecated response. Use schemaOutput instead.
   outputSchema: {
     type: 'default',
     properties: {
@@ -20,4 +22,5 @@ export const action: PaletteItem<ActionNodeSchema> = {
       errorMessage: { type: 'string', label: 'Error Message', description: 'Error details if the action failed' },
     },
   },
+  uischema,
 };

apps/demo/src/app/data/nodes/action/schema-output.ts

@@ -0,0 +1,34 @@
+import type { NodeSchemaOutput } from '@workflowbuilder/sdk';
+
+export const schemaOutput: NodeSchemaOutput = {
+  type: 'default',
+  bySourceHandle: {
+    success: {
+      type: 'object',
+      properties: {
+        result: {
+          type: 'object',
+          title: 'Result',
+          description: 'The data returned by the action',
+          properties: {
+            status: {
+              type: 'string',
+              title: 'Status',
+              description: 'Execution status: success, failure, or skipped',
+            },
+          },
+        },
+      },
+    },
+    error: {
+      type: 'object',
+      properties: {
+        errorMessage: {
+          type: 'string',
+          title: 'Error Message',
+          description: 'Error details if the action failed',
+        },
+      },
+    },
+  },
+};

apps/demo/src/app/data/nodes/action/uischema.ts

@@ -45,16 +45,16 @@ const sendEmailProperties: ActionNodeUISchema = {
       placeholder: 'manager@example.com',
     },
     {
-      type: 'Text',
+      type: 'VariableText',
       scope: scope('properties.sendEmail.properties.subject'),
       label: 'Subject',
-      placeholder: 'Type your subject here...',
+      placeholder: 'Type your subject here... Use {{ to insert variables',
     },
     {
-      type: 'TextArea',
+      type: 'VariableTextArea',
       scope: scope('properties.sendEmail.properties.body'),
       label: 'Email Body',
-      placeholder: 'Type your message here...',
+      placeholder: 'Type your message here... Use {{ to insert variables',
       minRows: 5,
     },
     {
@@ -81,7 +81,8 @@ const sendEmailProperties: ActionNodeUISchema = {
       elements: [
         { type: 'Label', text: 'Number of retries' },
         {
-          type: 'Text',
+          type: 'VariableDynamic',
+          variableType: 'number',
           scope: scope('properties.sendEmail.properties.retries'),
           rule: {
             effect: 'DISABLE',

apps/demo/src/app/data/nodes/ai-agent/ai-agent.ts

@@ -3,6 +3,7 @@ import type { PaletteItem } from '@workflowbuilder/sdk';
 
 import { defaultPropertiesData } from './default-properties-data';
 import { schema } from './schema';
+import { schemaOutput } from './schema-output';
 import { uischema } from './uischema';
 
 export const aiAgent: PaletteItem = {
@@ -13,13 +14,6 @@ export const aiAgent: PaletteItem = {
   templateType: NodeType.AiNode,
   defaultPropertiesData,
   schema,
+  schemaOutput,
   uischema,
-  outputSchema: {
-    type: 'default',
-    properties: {
-      response: { type: 'string', label: 'Response', description: 'The text generated by the AI model' },
-      tokensUsed: { type: 'number', label: 'Tokens Used', description: 'Total number of tokens consumed' },
-      model: { type: 'string', label: 'Model', description: 'The AI model that was used' },
-    },
-  },
 };

apps/demo/src/app/data/nodes/ai-agent/schema-output.ts

@@ -0,0 +1,27 @@
+import type { NodeSchemaOutput } from '@workflowbuilder/sdk';
+
+export const schemaOutput: NodeSchemaOutput = {
+  type: 'default',
+  bySourceHandle: {
+    success: {
+      type: 'object',
+      properties: {
+        response: {
+          type: 'string',
+          title: 'Response',
+          description: 'The text generated by the AI model',
+        },
+        tokensUsed: {
+          type: 'number',
+          title: 'Tokens Used',
+          description: 'Total number of tokens consumed',
+        },
+        model: {
+          type: 'string',
+          title: 'Model',
+          description: 'The AI model that was used',
+        },
+      },
+    },
+  },
+};

apps/demo/src/app/data/nodes/conditional/conditional.ts

@@ -2,6 +2,7 @@ import type { PaletteItem } from '@workflowbuilder/sdk';
 
 import { defaultPropertiesData } from './default-properties-data';
 import { type ConditionalNodeSchema, schema } from './schema';
+import { schemaOutput } from './schema-output';
 import { uischema } from './uischema';
 
 export const conditional: PaletteItem<ConditionalNodeSchema> = {
@@ -11,16 +12,6 @@ export const conditional: PaletteItem<ConditionalNodeSchema> = {
   icon: 'ListChecks',
   defaultPropertiesData,
   schema,
+  schemaOutput,
   uischema,
-  outputSchema: {
-    type: 'default',
-    properties: {
-      result: { type: 'boolean', label: 'Result', description: 'Whether the condition evaluated to true or false' },
-      matchedCondition: {
-        type: 'string',
-        label: 'Matched Condition',
-        description: 'The condition expression that matched',
-      },
-    },
-  },
 };

apps/demo/src/app/data/nodes/conditional/schema-output.ts

@@ -0,0 +1,22 @@
+import type { NodeSchemaOutput } from '@workflowbuilder/sdk';
+
+export const schemaOutput: NodeSchemaOutput = {
+  type: 'default',
+  bySourceHandle: {
+    success: {
+      type: 'object',
+      properties: {
+        result: {
+          type: 'boolean',
+          title: 'Result',
+          description: 'Whether the condition evaluated to true or false',
+        },
+        matchedCondition: {
+          type: 'string',
+          title: 'Matched Condition',
+          description: 'The condition expression that matched',
+        },
+      },
+    },
+  },
+};

apps/demo/src/app/data/nodes/decision/decision.ts

@@ -3,6 +3,7 @@ import type { PaletteItem } from '@workflowbuilder/sdk';
 
 import { defaultPropertiesData } from './default-properties-data';
 import { type DecisionNodeSchema, schema } from './schema';
+import { schemaOutput } from './schema-output';
 import { uischema } from './uischema';
 
 export const decision: PaletteItem<DecisionNodeSchema> = {
@@ -13,12 +14,6 @@ export const decision: PaletteItem<DecisionNodeSchema> = {
   templateType: NodeType.DecisionNode,
   defaultPropertiesData,
   schema,
+  schemaOutput,
   uischema,
-  outputSchema: {
-    type: 'default',
-    properties: {
-      selectedBranch: { type: 'string', label: 'Selected Branch', description: 'Label of the branch that was taken' },
-      branchIndex: { type: 'number', label: 'Branch Index', description: 'Zero-based index of the selected branch' },
-    },
-  },
 };

apps/demo/src/app/data/nodes/decision/schema-output.ts

@@ -0,0 +1,22 @@
+import type { NodeSchemaOutput } from '@workflowbuilder/sdk';
+
+export const schemaOutput: NodeSchemaOutput = {
+  type: 'default',
+  bySourceHandle: {
+    every: {
+      type: 'object',
+      properties: {
+        selectedBranch: {
+          type: 'string',
+          title: 'Selected Branch',
+          description: 'Label of the branch that was taken',
+        },
+        branchIndex: {
+          type: 'number',
+          title: 'Branch Index',
+          description: 'Zero-based index of the selected branch',
+        },
+      },
+    },
+  },
+};

apps/demo/src/app/data/nodes/delay/default-properties-data.ts

@@ -14,4 +14,5 @@ export const defaultPropertiesData: Required<NodeDataProperties<DelayNodeSchema>
     expression: 'order.processing_time * 2',
   },
   type: delayTypeOptions.fixed.value,
+  untilDate: '',
 };

apps/demo/src/app/data/nodes/delay/delay.ts

@@ -2,6 +2,7 @@ import type { PaletteItem } from '@workflowbuilder/sdk';
 
 import { defaultPropertiesData } from './default-properties-data';
 import { type DelayNodeSchema, schema } from './schema';
+import { schemaOutput } from './schema-output';
 import { uischema } from './uischema';
 
 export const delay: PaletteItem<DelayNodeSchema> = {
@@ -11,12 +12,6 @@ export const delay: PaletteItem<DelayNodeSchema> = {
   icon: 'Timer',
   defaultPropertiesData,
   schema,
+  schemaOutput,
   uischema,
-  outputSchema: {
-    type: 'default',
-    properties: {
-      resumedAt: { type: 'string', label: 'Resumed At', description: 'ISO 8601 date-time when the delay ended' },
-      delayDuration: { type: 'number', label: 'Delay Duration', description: 'Actual wait time in milliseconds' },
-    },
-  },
 };

apps/demo/src/app/data/nodes/delay/schema-output.ts

@@ -0,0 +1,23 @@
+import type { NodeSchemaOutput } from '@workflowbuilder/sdk';
+
+export const schemaOutput: NodeSchemaOutput = {
+  type: 'default',
+  bySourceHandle: {
+    success: {
+      type: 'object',
+      properties: {
+        resumedAt: {
+          type: 'string',
+          format: 'date-time',
+          title: 'Resumed At',
+          description: 'ISO 8601 date-time when the delay ended',
+        },
+        delayDuration: {
+          type: 'number',
+          title: 'Delay Duration',
+          description: 'Actual wait time in milliseconds',
+        },
+      },
+    },
+  },
+};

apps/demo/src/app/data/nodes/delay/schema.ts

@@ -37,6 +37,9 @@ export const schema = {
         },
       },
     },
+    untilDate: {
+      type: 'string',
+    },
   },
   ...conditionalValidation,
 } satisfies NodeSchema;

apps/demo/src/app/data/nodes/delay/uischema.ts

@@ -90,6 +90,26 @@ const dynamicDelayProperties: PaletteItem<DelayNodeSchema>['uischema'] = {
   ],
 };
 
+const untilSpecificProperties: PaletteItem<DelayNodeSchema>['uischema'] = {
+  rule: {
+    effect: 'SHOW',
+    condition: {
+      scope: scope('properties.type'),
+      schema: { const: delayTypeOptions.untilSpecific.value },
+    },
+  },
+  type: 'Accordion',
+  label: 'Date/Time',
+  elements: [
+    {
+      type: 'VariableDynamic',
+      scope: scope('properties.untilDate'),
+      label: 'Wait until',
+      variableType: 'date',
+    },
+  ],
+};
+
 export const uischema: UISchema = {
   type: 'VerticalLayout',
   elements: [
@@ -102,5 +122,6 @@ export const uischema: UISchema = {
     ...(generalInformation ? [generalInformation] : []),
     fixedDelayProperties,
     dynamicDelayProperties,
+    untilSpecificProperties,
   ],
 };