npm - @open-mercato/core - Versions diffs - 0.6.6-develop.6094.1.28b081ea16 → 0.6.6-develop.6126.1.0b9392fdae - Mend

@open-mercato/core 0.6.6-develop.6094.1.28b081ea16 → 0.6.6-develop.6126.1.0b9392fdae

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (317) hide show

package/dist/modules/workflows/components/NodeEditDialogCrudForm.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/modules/workflows/components/NodeEditDialogCrudForm.tsx"],
-  "sourcesContent": ["'use client'\n\nimport { Node } from '@xyflow/react'\nimport { useState, useEffect, useCallback, useMemo } from 'react'\nimport { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@open-mercato/ui/primitives/dialog'\nimport { Badge } from '@open-mercato/ui/primitives/badge'\nimport { Alert, AlertDescription } from '@open-mercato/ui/primitives/alert'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { Trash2 } from 'lucide-react'\nimport { CrudForm, type CrudFormGroup, type CrudField, type CrudCustomFieldRenderProps } from '@open-mercato/ui/backend/CrudForm'\nimport { JsonBuilder } from '@open-mercato/ui/backend/JsonBuilder'\nimport { FormFieldArrayEditor } from './fields/FormFieldArrayEditor'\nimport { ActivityArrayEditor } from './fields/ActivityArrayEditor'\nimport { MappingArrayEditor } from './fields/MappingArrayEditor'\nimport { WorkflowSelectorField } from './fields/WorkflowSelectorField'\nimport { StartPreConditionsEditor } from './fields/StartPreConditionsEditor'\nimport { nodeToFormValues, formValuesToNodeUpdates, isJsonSchemaFormat, type NodeFormValues } from '../lib/nodeFormTransforms'\nimport { sanitizeId } from '../lib/graph-utils'\n\n/**\n * JsonConfigEditor - Custom field wrapper for JsonBuilder\n */\nfunction JsonConfigEditor({ value, setValue, disabled }: CrudCustomFieldRenderProps) {\n  return (\n    <JsonBuilder\n      value={value || {}}\n      onChange={setValue}\n      disabled={disabled}\n    />\n  )\n}\n\nexport interface NodeEditDialogCrudFormProps {\n  node: Node | null\n  isOpen: boolean\n  onClose: () => void\n  onSave: (nodeId: string, updates: Partial<Node['data']>) => void\n  onDelete?: (nodeId: string) => void\n}\n\n/**\n * NodeEditDialogCrudForm - CrudForm-based modal dialog for editing step properties\n *\n * Migrated from NodeEditDialog to use CrudForm for:\n * - UI coherence with other admin forms\n * - Custom fields support (future enhancement)\n * - Standardized validation and error handling\n * - Consistent keyboard shortcuts\n *\n * Handles 7 node types with dynamic groups:\n * - start: Non-editable (alert only)\n * - end: Non-editable (alert only)\n * - userTask: Assignment fields + form builder\n * - automated: Activity type + activities array\n * - subWorkflow: Workflow selector + input/output mappings\n * - waitForSignal: Signal name + timeout\n * - decision: Basic fields only\n */\nexport function NodeEditDialogCrudForm({ node, isOpen, onClose, onSave, onDelete }: NodeEditDialogCrudFormProps) {\n  const [initialValues, setInitialValues] = useState<Partial<NodeFormValues>>({})\n  const [showJsonSchemaWarning, setShowJsonSchemaWarning] = useState(false)\n\n  // Load node data when dialog opens\n  useEffect(() => {\n    if (node && isOpen) {\n      const values = nodeToFormValues(node)\n      setInitialValues(values)\n      setShowJsonSchemaWarning(isJsonSchemaFormat(node))\n    }\n  }, [node, isOpen])\n\n  const handleSubmit = useCallback(async (values: Record<string, unknown>) => {\n    if (!node) return\n\n    // Validate and sanitize step ID\n    const sanitizedId = sanitizeId(node.id)\n    if (sanitizedId !== node.id) {\n      if (typeof window !== 'undefined') {\n        window.alert(\n          `\u26A0\uFE0F Step ID was sanitized from \"${node.id}\" to \"${sanitizedId}\" to match schema requirements (lowercase letters, numbers, hyphens, and underscores only).`\n        )\n      }\n    }\n\n    try {\n      const updates = formValuesToNodeUpdates(values as unknown as NodeFormValues, node)\n      onSave(node.id, updates)\n      onClose()\n    } catch (error) {\n      // Error will be displayed in form (e.g., invalid JSON)\n      throw error\n    }\n  }, [node, onSave, onClose])\n\n  const handleDelete = useCallback(() => {\n    if (!node || !onDelete) return\n    onDelete(node.id)\n  }, [node, onDelete])\n\n  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {\n    if (e.key === 'Escape') {\n      onClose()\n    }\n  }, [onClose])\n\n  // Dynamic groups based on node type\n  const groups: CrudFormGroup[] = useMemo(() => {\n    if (!node) return []\n\n    // End nodes are non-editable\n    if (node.type === 'end') {\n      return [\n        {\n          id: 'info',\n          column: 1,\n          bare: true,\n          component: () => (\n            <Alert variant=\"info\">\n              <AlertDescription>\n                End nodes cannot be edited. They mark the completion of the workflow.\n              </AlertDescription>\n            </Alert>\n          ),\n        },\n      ]\n    }\n\n    // Start nodes: allow editing pre-conditions\n    if (node.type === 'start') {\n      return [\n        {\n          id: 'info',\n          column: 1,\n          bare: true,\n          component: () => (\n            <Alert variant=\"info\" className=\"mb-4\">\n              <AlertDescription>\n                Start nodes mark the beginning of the workflow. You can define pre-conditions that must pass before the workflow can be started.\n              </AlertDescription>\n            </Alert>\n          ),\n        },\n        {\n          id: 'preConditions',\n          title: 'Pre-Conditions',\n          column: 1,\n          description: 'Business rules that must pass before the workflow can start',\n          fields: ['preConditions'],\n        },\n      ]\n    }\n\n    const baseGroups: CrudFormGroup[] = [\n      {\n        id: 'basic',\n        title: 'Basic Information',\n        column: 1,\n        fields: ['stepName', 'description', 'timeout'],\n      },\n    ]\n\n    // UserTask specific groups\n    if (node.type === 'userTask') {\n      return [\n        ...baseGroups,\n        {\n          id: 'userTask',\n          title: 'User Task Configuration',\n          column: 1,\n          fields: ['assignedTo', 'assignedToRoles', 'formKey'],\n        },\n        {\n          id: 'formFields',\n          title: 'Form Fields',\n          column: 1,\n          description: 'Define the form structure for this user task',\n          fields: ['formFields'],\n        },\n        {\n          id: 'advanced',\n          title: 'Advanced Configuration',\n          column: 1,\n          description: 'Additional JSON configuration (userTaskConfig, retryPolicy, etc.)',\n          fields: ['advancedConfig'],\n        },\n      ]\n    }\n\n    // Automated specific groups\n    if (node.type === 'automated') {\n      return [\n        ...baseGroups,\n        {\n          id: 'automated',\n          title: 'Automated Task Configuration',\n          column: 1,\n          fields: ['activityType', 'activityId'],\n        },\n        {\n          id: 'stepActivities',\n          title: 'Step Activities',\n          column: 1,\n          description: 'Activities executed as part of this automated step',\n          fields: ['stepActivities'],\n        },\n        {\n          id: 'advanced',\n          title: 'Advanced Configuration',\n          column: 1,\n          description: 'Additional JSON configuration (retryPolicy, etc.)',\n          fields: ['advancedConfig'],\n        },\n      ]\n    }\n\n    // SubWorkflow specific groups\n    if (node.type === 'subWorkflow') {\n      return [\n        ...baseGroups,\n        {\n          id: 'subWorkflow',\n          title: 'Sub-Workflow Configuration',\n          column: 1,\n          fields: ['subWorkflowId', 'subWorkflowVersion'],\n        },\n        {\n          id: 'mappings',\n          title: 'Data Mappings',\n          column: 1,\n          description: 'Map data between parent and sub-workflow',\n          fields: ['inputMappings', 'outputMappings'],\n        },\n        {\n          id: 'advanced',\n          title: 'Advanced Configuration',\n          column: 1,\n          description: 'Additional JSON configuration',\n          fields: ['advancedConfig'],\n        },\n      ]\n    }\n\n    // WaitForSignal specific groups\n    if (node.type === 'waitForSignal') {\n      return [\n        ...baseGroups,\n        {\n          id: 'signal',\n          title: 'Signal Configuration',\n          column: 1,\n          fields: ['signalName', 'signalTimeout'],\n        },\n        {\n          id: 'advanced',\n          title: 'Advanced Configuration',\n          column: 1,\n          description: 'Additional JSON configuration',\n          fields: ['advancedConfig'],\n        },\n      ]\n    }\n\n    // Decision and other types: just basic fields + advanced\n    return [\n      ...baseGroups,\n      {\n        id: 'advanced',\n        title: 'Advanced Configuration',\n        column: 1,\n        description: 'Additional JSON configuration',\n        fields: ['advancedConfig'],\n      },\n    ]\n  }, [node])\n\n  // Define all possible form fields (only relevant ones are used based on groups)\n  const fields: CrudField[] = useMemo(() => [\n    // Basic fields\n    {\n      id: 'stepName',\n      label: 'Step Name',\n      type: 'text',\n      placeholder: 'Enter step name',\n      required: true,\n      description: 'Display name for this step',\n    },\n    {\n      id: 'description',\n      label: 'Description',\n      type: 'textarea',\n      placeholder: 'Enter step description',\n      description: 'Optional description of what this step does',\n    },\n    {\n      id: 'timeout',\n      label: 'Timeout',\n      type: 'text',\n      placeholder: 'PT30S or 30000',\n      description: 'ISO 8601 duration (e.g., PT30S) or milliseconds',\n    },\n\n    // UserTask fields\n    {\n      id: 'assignedTo',\n      label: 'Assigned To',\n      type: 'text',\n      placeholder: 'user@example.com or userId',\n      description: 'User email or ID to assign this task to',\n    },\n    {\n      id: 'assignedToRoles',\n      label: 'Assigned To Roles',\n      type: 'text',\n      placeholder: 'admin, manager',\n      description: 'Comma-separated list of roles that can claim this task',\n    },\n    {\n      id: 'formKey',\n      label: 'Form Key',\n      type: 'text',\n      placeholder: 'approval_form',\n      description: 'Optional form key for external form rendering',\n    },\n    {\n      id: 'formFields',\n      label: 'Form Fields',\n      type: 'custom',\n      component: (props) => (\n        <FormFieldArrayEditor\n          {...props}\n          value={props.value as any}\n          isJsonSchemaFormat={showJsonSchemaWarning}\n        />\n      ),\n    },\n\n    // Automated fields\n    {\n      id: 'activityType',\n      label: 'Activity Type',\n      type: 'select',\n      options: [\n        { value: 'SEND_EMAIL', label: 'Send Email' },\n        { value: 'CALL_API', label: 'Call API' },\n        { value: 'UPDATE_ENTITY', label: 'Update Entity' },\n        { value: 'EMIT_EVENT', label: 'Emit Event' },\n        { value: 'CALL_WEBHOOK', label: 'Call Webhook' },\n        { value: 'EXECUTE_FUNCTION', label: 'Execute Function' },\n        { value: 'WAIT', label: 'Wait' },\n      ],\n      description: 'Type of activity to execute',\n    },\n    {\n      id: 'activityId',\n      label: 'Activity ID',\n      type: 'text',\n      placeholder: 'send_welcome_email',\n      description: 'Unique identifier for this activity',\n    },\n    {\n      id: 'stepActivities',\n      label: 'Step Activities',\n      type: 'custom',\n      component: (props) => <ActivityArrayEditor {...props} value={props.value as any} />,\n    },\n\n    // SubWorkflow fields\n    {\n      id: 'subWorkflowId',\n      label: 'Sub-Workflow',\n      type: 'custom',\n      component: (props) => <WorkflowSelectorField {...props} value={props.value as any} />,\n    },\n    {\n      id: 'subWorkflowVersion',\n      label: 'Version',\n      type: 'number',\n      placeholder: '1',\n      description: 'Specific version of the sub-workflow to invoke',\n    },\n    {\n      id: 'inputMappings',\n      label: 'Input Mappings',\n      type: 'custom',\n      component: (props) => (\n        <MappingArrayEditor\n          {...props}\n          value={props.value as any}\n          label=\"Input Mappings\"\n          description=\"Map parent workflow data to sub-workflow input\"\n        />\n      ),\n    },\n    {\n      id: 'outputMappings',\n      label: 'Output Mappings',\n      type: 'custom',\n      component: (props) => (\n        <MappingArrayEditor\n          {...props}\n          value={props.value as any}\n          label=\"Output Mappings\"\n          description=\"Map sub-workflow output back to parent workflow\"\n        />\n      ),\n    },\n\n    // WaitForSignal fields\n    {\n      id: 'signalName',\n      label: 'Signal Name',\n      type: 'text',\n      placeholder: 'approval_received',\n      description: 'Name of the signal to wait for',\n    },\n    {\n      id: 'signalTimeout',\n      label: 'Signal Timeout',\n      type: 'text',\n      placeholder: 'PT5M',\n      description: 'How long to wait for the signal (ISO 8601 duration)',\n    },\n\n    // Advanced configuration\n    {\n      id: 'advancedConfig',\n      label: 'Advanced Configuration (JSON)',\n      type: 'custom',\n      description: 'Additional JSON configuration merged with the step data',\n      component: (props) => <JsonConfigEditor {...props} />,\n    },\n\n    // Start node pre-conditions\n    {\n      id: 'preConditions',\n      label: 'Pre-Conditions',\n      type: 'custom',\n      description: 'Business rules that must pass before the workflow can start',\n      component: (props) => <StartPreConditionsEditor {...props} value={props.value as any} />,\n    },\n  ], [showJsonSchemaWarning])\n\n  if (!isOpen || !node) return null\n\n  const nodeType = node.type || 'unknown'\n  const nodeTypeLabel = nodeType.charAt(0).toUpperCase() + nodeType.slice(1).replace(/([A-Z])/g, ' $1')\n\n  const canDelete = !!onDelete\n\n  return (\n    <Dialog open={isOpen} onOpenChange={onClose}>\n      <DialogContent\n        className=\"sm:max-w-7xl max-h-[90vh] overflow-hidden flex flex-col !p-0 [&_.grid]:!grid-cols-1\"\n        onKeyDown={handleKeyDown}\n      >\n        <DialogHeader className=\"flex-shrink-0 p-6 pb-4 border-b border-border/70\">\n          <div className=\"flex items-center gap-2 mb-2\">\n            <DialogTitle>Edit Step</DialogTitle>\n            <Badge variant=\"secondary\" className=\"text-xs\">\n              {nodeTypeLabel}\n            </Badge>\n          </div>\n          <div className=\"space-y-1\">\n            <DialogDescription>\n              Configure step properties and behavior\n            </DialogDescription>\n            <div className=\"flex items-center gap-2 text-xs text-muted-foreground\">\n              <span className=\"font-medium\">ID:</span>\n              <code className=\"px-1.5 py-0.5 rounded bg-muted font-mono\">{node.id}</code>\n            </div>\n          </div>\n        </DialogHeader>\n\n        <div className=\"flex-1 overflow-y-auto min-h-0 px-6\">\n          {/* JSON Schema Conversion Warning */}\n          {showJsonSchemaWarning && (\n            <Alert variant=\"info\" className=\"mb-4\">\n              <AlertDescription className=\"text-xs\">\n                This form uses JSON Schema format. Fields have been converted for visual editing.\n                When you save, it will be converted to the simplified format. To preserve the original JSON Schema,\n                edit it in the &#34;Advanced Configuration (JSON)&#34; section.\n              </AlertDescription>\n            </Alert>\n          )}\n\n          <CrudForm\n            fields={fields}\n            groups={groups}\n            initialValues={initialValues}\n            onSubmit={handleSubmit}\n            embedded={true}\n            submitLabel=\"Save Step\"\n            extraActions={\n              canDelete ? (\n                <Button\n                  type=\"button\"\n                  variant=\"outline\"\n                  onClick={handleDelete}\n                  className=\"text-red-600 border-red-200 hover:bg-red-50\"\n                >\n                  <Trash2 className=\"size-4 mr-2\" />\n                  Delete Step\n                </Button>\n              ) : undefined\n            }\n          />\n        </div>\n      </DialogContent>\n    </Dialog>\n  )\n}\n"],
+  "sourcesContent": ["'use client'\n\nimport type { Node } from '@xyflow/react'\nimport { useState, useEffect, useCallback, useMemo } from 'react'\nimport { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@open-mercato/ui/primitives/dialog'\nimport { Badge } from '@open-mercato/ui/primitives/badge'\nimport { Alert, AlertDescription } from '@open-mercato/ui/primitives/alert'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { Trash2 } from 'lucide-react'\nimport { CrudForm, type CrudFormGroup, type CrudField, type CrudCustomFieldRenderProps } from '@open-mercato/ui/backend/CrudForm'\nimport { JsonBuilder } from '@open-mercato/ui/backend/JsonBuilder'\nimport { FormFieldArrayEditor } from './fields/FormFieldArrayEditor'\nimport { ActivityArrayEditor } from './fields/ActivityArrayEditor'\nimport { MappingArrayEditor } from './fields/MappingArrayEditor'\nimport { WorkflowSelectorField } from './fields/WorkflowSelectorField'\nimport { StartPreConditionsEditor } from './fields/StartPreConditionsEditor'\nimport { nodeToFormValues, formValuesToNodeUpdates, isJsonSchemaFormat, type NodeFormValues } from '../lib/nodeFormTransforms'\nimport { sanitizeId } from '../lib/graph-utils'\n\n/**\n * JsonConfigEditor - Custom field wrapper for JsonBuilder\n */\nfunction JsonConfigEditor({ value, setValue, disabled }: CrudCustomFieldRenderProps) {\n  return (\n    <JsonBuilder\n      value={value || {}}\n      onChange={setValue}\n      disabled={disabled}\n    />\n  )\n}\n\nexport interface NodeEditDialogCrudFormProps {\n  node: Node | null\n  isOpen: boolean\n  onClose: () => void\n  onSave: (nodeId: string, updates: Partial<Node['data']>) => void\n  onDelete?: (nodeId: string) => void\n}\n\n/**\n * NodeEditDialogCrudForm - CrudForm-based modal dialog for editing step properties\n *\n * Migrated from NodeEditDialog to use CrudForm for:\n * - UI coherence with other admin forms\n * - Custom fields support (future enhancement)\n * - Standardized validation and error handling\n * - Consistent keyboard shortcuts\n *\n * Handles 7 node types with dynamic groups:\n * - start: Non-editable (alert only)\n * - end: Non-editable (alert only)\n * - userTask: Assignment fields + form builder\n * - automated: Activity type + activities array\n * - subWorkflow: Workflow selector + input/output mappings\n * - waitForSignal: Signal name + timeout\n * - decision: Basic fields only\n */\nexport function NodeEditDialogCrudForm({ node, isOpen, onClose, onSave, onDelete }: NodeEditDialogCrudFormProps) {\n  const [initialValues, setInitialValues] = useState<Partial<NodeFormValues>>({})\n  const [showJsonSchemaWarning, setShowJsonSchemaWarning] = useState(false)\n\n  // Load node data when dialog opens\n  useEffect(() => {\n    if (node && isOpen) {\n      const values = nodeToFormValues(node)\n      setInitialValues(values)\n      setShowJsonSchemaWarning(isJsonSchemaFormat(node))\n    }\n  }, [node, isOpen])\n\n  const handleSubmit = useCallback(async (values: Record<string, unknown>) => {\n    if (!node) return\n\n    // Validate and sanitize step ID\n    const sanitizedId = sanitizeId(node.id)\n    if (sanitizedId !== node.id) {\n      if (typeof window !== 'undefined') {\n        window.alert(\n          `\u26A0\uFE0F Step ID was sanitized from \"${node.id}\" to \"${sanitizedId}\" to match schema requirements (lowercase letters, numbers, hyphens, and underscores only).`\n        )\n      }\n    }\n\n    try {\n      const updates = formValuesToNodeUpdates(values as unknown as NodeFormValues, node)\n      onSave(node.id, updates)\n      onClose()\n    } catch (error) {\n      // Error will be displayed in form (e.g., invalid JSON)\n      throw error\n    }\n  }, [node, onSave, onClose])\n\n  const handleDelete = useCallback(() => {\n    if (!node || !onDelete) return\n    onDelete(node.id)\n  }, [node, onDelete])\n\n  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {\n    if (e.key === 'Escape') {\n      onClose()\n    }\n  }, [onClose])\n\n  // Dynamic groups based on node type\n  const groups: CrudFormGroup[] = useMemo(() => {\n    if (!node) return []\n\n    // End nodes are non-editable\n    if (node.type === 'end') {\n      return [\n        {\n          id: 'info',\n          column: 1,\n          bare: true,\n          component: () => (\n            <Alert variant=\"info\">\n              <AlertDescription>\n                End nodes cannot be edited. They mark the completion of the workflow.\n              </AlertDescription>\n            </Alert>\n          ),\n        },\n      ]\n    }\n\n    // Start nodes: allow editing pre-conditions\n    if (node.type === 'start') {\n      return [\n        {\n          id: 'info',\n          column: 1,\n          bare: true,\n          component: () => (\n            <Alert variant=\"info\" className=\"mb-4\">\n              <AlertDescription>\n                Start nodes mark the beginning of the workflow. You can define pre-conditions that must pass before the workflow can be started.\n              </AlertDescription>\n            </Alert>\n          ),\n        },\n        {\n          id: 'preConditions',\n          title: 'Pre-Conditions',\n          column: 1,\n          description: 'Business rules that must pass before the workflow can start',\n          fields: ['preConditions'],\n        },\n      ]\n    }\n\n    const baseGroups: CrudFormGroup[] = [\n      {\n        id: 'basic',\n        title: 'Basic Information',\n        column: 1,\n        fields: ['stepName', 'description', 'timeout'],\n      },\n    ]\n\n    // UserTask specific groups\n    if (node.type === 'userTask') {\n      return [\n        ...baseGroups,\n        {\n          id: 'userTask',\n          title: 'User Task Configuration',\n          column: 1,\n          fields: ['assignedTo', 'assignedToRoles', 'formKey'],\n        },\n        {\n          id: 'formFields',\n          title: 'Form Fields',\n          column: 1,\n          description: 'Define the form structure for this user task',\n          fields: ['formFields'],\n        },\n        {\n          id: 'advanced',\n          title: 'Advanced Configuration',\n          column: 1,\n          description: 'Additional JSON configuration (userTaskConfig, retryPolicy, etc.)',\n          fields: ['advancedConfig'],\n        },\n      ]\n    }\n\n    // Automated specific groups\n    if (node.type === 'automated') {\n      return [\n        ...baseGroups,\n        {\n          id: 'automated',\n          title: 'Automated Task Configuration',\n          column: 1,\n          fields: ['activityType', 'activityId'],\n        },\n        {\n          id: 'stepActivities',\n          title: 'Step Activities',\n          column: 1,\n          description: 'Activities executed as part of this automated step',\n          fields: ['stepActivities'],\n        },\n        {\n          id: 'advanced',\n          title: 'Advanced Configuration',\n          column: 1,\n          description: 'Additional JSON configuration (retryPolicy, etc.)',\n          fields: ['advancedConfig'],\n        },\n      ]\n    }\n\n    // SubWorkflow specific groups\n    if (node.type === 'subWorkflow') {\n      return [\n        ...baseGroups,\n        {\n          id: 'subWorkflow',\n          title: 'Sub-Workflow Configuration',\n          column: 1,\n          fields: ['subWorkflowId', 'subWorkflowVersion'],\n        },\n        {\n          id: 'mappings',\n          title: 'Data Mappings',\n          column: 1,\n          description: 'Map data between parent and sub-workflow',\n          fields: ['inputMappings', 'outputMappings'],\n        },\n        {\n          id: 'advanced',\n          title: 'Advanced Configuration',\n          column: 1,\n          description: 'Additional JSON configuration',\n          fields: ['advancedConfig'],\n        },\n      ]\n    }\n\n    // WaitForSignal specific groups\n    if (node.type === 'waitForSignal') {\n      return [\n        ...baseGroups,\n        {\n          id: 'signal',\n          title: 'Signal Configuration',\n          column: 1,\n          fields: ['signalName', 'signalTimeout'],\n        },\n        {\n          id: 'advanced',\n          title: 'Advanced Configuration',\n          column: 1,\n          description: 'Additional JSON configuration',\n          fields: ['advancedConfig'],\n        },\n      ]\n    }\n\n    // Decision and other types: just basic fields + advanced\n    return [\n      ...baseGroups,\n      {\n        id: 'advanced',\n        title: 'Advanced Configuration',\n        column: 1,\n        description: 'Additional JSON configuration',\n        fields: ['advancedConfig'],\n      },\n    ]\n  }, [node])\n\n  // Define all possible form fields (only relevant ones are used based on groups)\n  const fields: CrudField[] = useMemo(() => [\n    // Basic fields\n    {\n      id: 'stepName',\n      label: 'Step Name',\n      type: 'text',\n      placeholder: 'Enter step name',\n      required: true,\n      description: 'Display name for this step',\n    },\n    {\n      id: 'description',\n      label: 'Description',\n      type: 'textarea',\n      placeholder: 'Enter step description',\n      description: 'Optional description of what this step does',\n    },\n    {\n      id: 'timeout',\n      label: 'Timeout',\n      type: 'text',\n      placeholder: 'PT30S or 30000',\n      description: 'ISO 8601 duration (e.g., PT30S) or milliseconds',\n    },\n\n    // UserTask fields\n    {\n      id: 'assignedTo',\n      label: 'Assigned To',\n      type: 'text',\n      placeholder: 'user@example.com or userId',\n      description: 'User email or ID to assign this task to',\n    },\n    {\n      id: 'assignedToRoles',\n      label: 'Assigned To Roles',\n      type: 'text',\n      placeholder: 'admin, manager',\n      description: 'Comma-separated list of roles that can claim this task',\n    },\n    {\n      id: 'formKey',\n      label: 'Form Key',\n      type: 'text',\n      placeholder: 'approval_form',\n      description: 'Optional form key for external form rendering',\n    },\n    {\n      id: 'formFields',\n      label: 'Form Fields',\n      type: 'custom',\n      component: (props) => (\n        <FormFieldArrayEditor\n          {...props}\n          value={props.value as any}\n          isJsonSchemaFormat={showJsonSchemaWarning}\n        />\n      ),\n    },\n\n    // Automated fields\n    {\n      id: 'activityType',\n      label: 'Activity Type',\n      type: 'select',\n      options: [\n        { value: 'SEND_EMAIL', label: 'Send Email' },\n        { value: 'CALL_API', label: 'Call API' },\n        { value: 'UPDATE_ENTITY', label: 'Update Entity' },\n        { value: 'EMIT_EVENT', label: 'Emit Event' },\n        { value: 'CALL_WEBHOOK', label: 'Call Webhook' },\n        { value: 'EXECUTE_FUNCTION', label: 'Execute Function' },\n        { value: 'WAIT', label: 'Wait' },\n      ],\n      description: 'Type of activity to execute',\n    },\n    {\n      id: 'activityId',\n      label: 'Activity ID',\n      type: 'text',\n      placeholder: 'send_welcome_email',\n      description: 'Unique identifier for this activity',\n    },\n    {\n      id: 'stepActivities',\n      label: 'Step Activities',\n      type: 'custom',\n      component: (props) => <ActivityArrayEditor {...props} value={props.value as any} />,\n    },\n\n    // SubWorkflow fields\n    {\n      id: 'subWorkflowId',\n      label: 'Sub-Workflow',\n      type: 'custom',\n      component: (props) => <WorkflowSelectorField {...props} value={props.value as any} />,\n    },\n    {\n      id: 'subWorkflowVersion',\n      label: 'Version',\n      type: 'number',\n      placeholder: '1',\n      description: 'Specific version of the sub-workflow to invoke',\n    },\n    {\n      id: 'inputMappings',\n      label: 'Input Mappings',\n      type: 'custom',\n      component: (props) => (\n        <MappingArrayEditor\n          {...props}\n          value={props.value as any}\n          label=\"Input Mappings\"\n          description=\"Map parent workflow data to sub-workflow input\"\n        />\n      ),\n    },\n    {\n      id: 'outputMappings',\n      label: 'Output Mappings',\n      type: 'custom',\n      component: (props) => (\n        <MappingArrayEditor\n          {...props}\n          value={props.value as any}\n          label=\"Output Mappings\"\n          description=\"Map sub-workflow output back to parent workflow\"\n        />\n      ),\n    },\n\n    // WaitForSignal fields\n    {\n      id: 'signalName',\n      label: 'Signal Name',\n      type: 'text',\n      placeholder: 'approval_received',\n      description: 'Name of the signal to wait for',\n    },\n    {\n      id: 'signalTimeout',\n      label: 'Signal Timeout',\n      type: 'text',\n      placeholder: 'PT5M',\n      description: 'How long to wait for the signal (ISO 8601 duration)',\n    },\n\n    // Advanced configuration\n    {\n      id: 'advancedConfig',\n      label: 'Advanced Configuration (JSON)',\n      type: 'custom',\n      description: 'Additional JSON configuration merged with the step data',\n      component: (props) => <JsonConfigEditor {...props} />,\n    },\n\n    // Start node pre-conditions\n    {\n      id: 'preConditions',\n      label: 'Pre-Conditions',\n      type: 'custom',\n      description: 'Business rules that must pass before the workflow can start',\n      component: (props) => <StartPreConditionsEditor {...props} value={props.value as any} />,\n    },\n  ], [showJsonSchemaWarning])\n\n  if (!isOpen || !node) return null\n\n  const nodeType = node.type || 'unknown'\n  const nodeTypeLabel = nodeType.charAt(0).toUpperCase() + nodeType.slice(1).replace(/([A-Z])/g, ' $1')\n\n  const canDelete = !!onDelete\n\n  return (\n    <Dialog open={isOpen} onOpenChange={onClose}>\n      <DialogContent\n        className=\"sm:max-w-7xl max-h-[90vh] overflow-hidden flex flex-col !p-0 [&_.grid]:!grid-cols-1\"\n        onKeyDown={handleKeyDown}\n      >\n        <DialogHeader className=\"flex-shrink-0 p-6 pb-4 border-b border-border/70\">\n          <div className=\"flex items-center gap-2 mb-2\">\n            <DialogTitle>Edit Step</DialogTitle>\n            <Badge variant=\"secondary\" className=\"text-xs\">\n              {nodeTypeLabel}\n            </Badge>\n          </div>\n          <div className=\"space-y-1\">\n            <DialogDescription>\n              Configure step properties and behavior\n            </DialogDescription>\n            <div className=\"flex items-center gap-2 text-xs text-muted-foreground\">\n              <span className=\"font-medium\">ID:</span>\n              <code className=\"px-1.5 py-0.5 rounded bg-muted font-mono\">{node.id}</code>\n            </div>\n          </div>\n        </DialogHeader>\n\n        <div className=\"flex-1 overflow-y-auto min-h-0 px-6\">\n          {/* JSON Schema Conversion Warning */}\n          {showJsonSchemaWarning && (\n            <Alert variant=\"info\" className=\"mb-4\">\n              <AlertDescription className=\"text-xs\">\n                This form uses JSON Schema format. Fields have been converted for visual editing.\n                When you save, it will be converted to the simplified format. To preserve the original JSON Schema,\n                edit it in the &#34;Advanced Configuration (JSON)&#34; section.\n              </AlertDescription>\n            </Alert>\n          )}\n\n          <CrudForm\n            fields={fields}\n            groups={groups}\n            initialValues={initialValues}\n            onSubmit={handleSubmit}\n            embedded={true}\n            submitLabel=\"Save Step\"\n            extraActions={\n              canDelete ? (\n                <Button\n                  type=\"button\"\n                  variant=\"outline\"\n                  onClick={handleDelete}\n                  className=\"text-red-600 border-red-200 hover:bg-red-50\"\n                >\n                  <Trash2 className=\"size-4 mr-2\" />\n                  Delete Step\n                </Button>\n              ) : undefined\n            }\n          />\n        </div>\n      </DialogContent>\n    </Dialog>\n  )\n}\n"],
   "mappings": "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",
   "names": []
 }

package/dist/modules/workflows/components/WorkflowGraph.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/modules/workflows/components/WorkflowGraph.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport dynamic from 'next/dynamic'\nimport type { Node, Edge, Connection } from '@xyflow/react'\nimport { Spinner } from '@open-mercato/ui/primitives/spinner'\n\nexport interface WorkflowGraphProps {\n  initialNodes?: Node[]\n  initialEdges?: Edge[]\n  onNodesChange?: (changes: any[]) => void\n  onEdgesChange?: (changes: any[]) => void\n  onNodeClick?: (event: React.MouseEvent, node: Node) => void\n  onEdgeClick?: (event: React.MouseEvent, edge: Edge) => void\n  onConnect?: (connection: Connection) => void\n  editable?: boolean\n  className?: string\n  height?: string\n}\n\nconst WorkflowGraphImpl = dynamic(() => import('./WorkflowGraphImpl'), {\n  ssr: false,\n  loading: () => null,\n})\n\nfunction WorkflowGraphPlaceholder({ height }: { height: string }) {\n  return (\n    <div\n      className=\"workflow-graph-container flex items-center justify-center rounded-lg border border-border bg-muted/30\"\n      style={{ height }}\n    >\n      <Spinner className=\"h-6 w-6 text-muted-foreground\" />\n    </div>\n  )\n}\n\n/**\n * WorkflowGraph \u2014 lazy-loaded ReactFlow wrapper.\n *\n * @xyflow/react is loaded via next/dynamic({ ssr: false }) so the ~12 MB\n * package only enters the Turbopack module graph when this component\n * actually renders.\n */\nexport function WorkflowGraph(props: WorkflowGraphProps) {\n  const { height = '600px' } = props\n  // Track impl-chunk readiness so the loading placeholder respects the\n  // caller's `height` prop (next/dynamic's `loading` cannot access props).\n  // The browser caches the module, so the duplicate `import()` is free.\n  const [isImplReady, setIsImplReady] = React.useState(false)\n  React.useEffect(() => {\n    let cancelled = false\n    void import('./WorkflowGraphImpl').then(() => {\n      if (!cancelled) setIsImplReady(true)\n    })\n    return () => {\n      cancelled = true\n    }\n  }, [])\n\n  if (!isImplReady) return <WorkflowGraphPlaceholder height={height} />\n  return <WorkflowGraphImpl {...props} />\n}\n\n/**\n * WorkflowGraphReadOnly \u2014 read-only viewer that reuses WorkflowGraph.\n */\nexport function WorkflowGraphReadOnly({\n  nodes,\n  edges,\n  className = '',\n  height = '500px',\n}: {\n  nodes: Node[]\n  edges: Edge[]\n  className?: string\n  height?: string\n}) {\n  return (\n    <WorkflowGraph\n      initialNodes={nodes}\n      initialEdges={edges}\n      editable={false}\n      className={className}\n      height={height}\n    />\n  )\n}\n"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport dynamic from 'next/dynamic'\nimport type { Node, Edge, Connection } from '@xyflow/react'\nimport { Spinner } from '@open-mercato/ui/primitives/spinner'\n\nexport interface WorkflowGraphProps {\n  initialNodes?: Node[]\n  initialEdges?: Edge[]\n  onNodesChange?: (nodes: Node[]) => void\n  onEdgesChange?: (edges: Edge[]) => void\n  onNodeClick?: (event: React.MouseEvent, node: Node) => void\n  onEdgeClick?: (event: React.MouseEvent, edge: Edge) => void\n  onConnect?: (connection: Connection) => void\n  editable?: boolean\n  className?: string\n  height?: string\n}\n\nconst WorkflowGraphImpl = dynamic(() => import('./WorkflowGraphImpl'), {\n  ssr: false,\n  loading: () => null,\n})\n\nfunction WorkflowGraphPlaceholder({ height }: { height: string }) {\n  return (\n    <div\n      className=\"workflow-graph-container flex items-center justify-center rounded-lg border border-border bg-muted/30\"\n      style={{ height }}\n    >\n      <Spinner className=\"h-6 w-6 text-muted-foreground\" />\n    </div>\n  )\n}\n\n/**\n * WorkflowGraph \u2014 lazy-loaded ReactFlow wrapper.\n *\n * @xyflow/react is loaded via next/dynamic({ ssr: false }) so the ~12 MB\n * package only enters the Turbopack module graph when this component\n * actually renders.\n */\nexport function WorkflowGraph(props: WorkflowGraphProps) {\n  const { height = '600px' } = props\n  // Track impl-chunk readiness so the loading placeholder respects the\n  // caller's `height` prop (next/dynamic's `loading` cannot access props).\n  // The browser caches the module, so the duplicate `import()` is free.\n  const [isImplReady, setIsImplReady] = React.useState(false)\n  React.useEffect(() => {\n    let cancelled = false\n    void import('./WorkflowGraphImpl').then(() => {\n      if (!cancelled) setIsImplReady(true)\n    })\n    return () => {\n      cancelled = true\n    }\n  }, [])\n\n  if (!isImplReady) return <WorkflowGraphPlaceholder height={height} />\n  return <WorkflowGraphImpl {...props} />\n}\n\n/**\n * WorkflowGraphReadOnly \u2014 read-only viewer that reuses WorkflowGraph.\n */\nexport function WorkflowGraphReadOnly({\n  nodes,\n  edges,\n  className = '',\n  height = '500px',\n}: {\n  nodes: Node[]\n  edges: Edge[]\n  className?: string\n  height?: string\n}) {\n  return (\n    <WorkflowGraph\n      initialNodes={nodes}\n      initialEdges={edges}\n      editable={false}\n      className={className}\n      height={height}\n    />\n  )\n}\n"],
   "mappings": ";AA+BM;AA7BN,YAAY,WAAW;AACvB,OAAO,aAAa;AAEpB,SAAS,eAAe;AAexB,MAAM,oBAAoB,QAAQ,MAAM,OAAO,qBAAqB,GAAG;AAAA,EACrE,KAAK;AAAA,EACL,SAAS,MAAM;AACjB,CAAC;AAED,SAAS,yBAAyB,EAAE,OAAO,GAAuB;AAChE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO,EAAE,OAAO;AAAA,MAEhB,8BAAC,WAAQ,WAAU,iCAAgC;AAAA;AAAA,EACrD;AAEJ;AASO,SAAS,cAAc,OAA2B;AACvD,QAAM,EAAE,SAAS,QAAQ,IAAI;AAI7B,QAAM,CAAC,aAAa,cAAc,IAAI,MAAM,SAAS,KAAK;AAC1D,QAAM,UAAU,MAAM;AACpB,QAAI,YAAY;AAChB,SAAK,OAAO,qBAAqB,EAAE,KAAK,MAAM;AAC5C,UAAI,CAAC,UAAW,gBAAe,IAAI;AAAA,IACrC,CAAC;AACD,WAAO,MAAM;AACX,kBAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,MAAI,CAAC,YAAa,QAAO,oBAAC,4BAAyB,QAAgB;AACnE,SAAO,oBAAC,qBAAmB,GAAG,OAAO;AACvC;AAKO,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,SAAS;AACX,GAKG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAc;AAAA,MACd,cAAc;AAAA,MACd,UAAU;AAAA,MACV;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/dist/modules/workflows/components/WorkflowGraphImpl.js CHANGED Viewed

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import "@xyflow/react/dist/style.css";
-import { useCallback, useMemo, useEffect, useState } from "react";
+import { useCallback, useMemo, useEffect, useRef, useState } from "react";
 import {
   ReactFlow,
   Controls,
@@ -12,6 +12,8 @@ import {
   useNodesState,
   useEdgesState,
   addEdge,
+  applyNodeChanges,
+  applyEdgeChanges,
   ConnectionMode,
   MarkerType
 } from "@xyflow/react";
@@ -35,8 +37,12 @@ function WorkflowGraphImpl({
   height = "600px"
 }) {
   const t = useT();
-  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
-  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+  const [nodes, setNodes] = useNodesState(initialNodes);
+  const [edges, setEdges] = useEdgesState(initialEdges);
+  const latestNodesRef = useRef(nodes);
+  latestNodesRef.current = nodes;
+  const latestEdgesRef = useRef(edges);
+  latestEdgesRef.current = edges;
   const { resolvedTheme } = useTheme();
   const isDark = resolvedTheme === "dark";
   const backgroundDotColor = isDark ? "#374151" : "#e5e7eb";
@@ -80,21 +86,23 @@ function WorkflowGraphImpl({
   );
   const handleNodesChange = useCallback(
     (changes) => {
-      onNodesChange(changes);
+      const nextNodes = applyNodeChanges(changes, latestNodesRef.current);
+      setNodes(nextNodes);
       if (onNodesChangeProp) {
-        onNodesChangeProp(changes);
+        onNodesChangeProp(nextNodes);
       }
     },
-    [onNodesChange, onNodesChangeProp]
+    [setNodes, onNodesChangeProp]
   );
   const handleEdgesChange = useCallback(
     (changes) => {
-      onEdgesChange(changes);
+      const nextEdges = applyEdgeChanges(changes, latestEdgesRef.current);
+      setEdges(nextEdges);
       if (onEdgesChangeProp) {
-        onEdgesChangeProp(changes);
+        onEdgesChangeProp(nextEdges);
       }
     },
-    [onEdgesChange, onEdgesChangeProp]
+    [setEdges, onEdgesChangeProp]
   );
   const nodeTypes = useMemo(
     () => ({

package/dist/modules/workflows/components/WorkflowGraphImpl.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/modules/workflows/components/WorkflowGraphImpl.tsx"],
-  "sourcesContent": ["'use client'\n\nimport '@xyflow/react/dist/style.css'\n\nimport { useCallback, useMemo, useEffect, useState } from 'react'\nimport {\n  ReactFlow,\n  Node,\n  Edge,\n  Controls,\n  Background,\n  BackgroundVariant,\n  MiniMap,\n  Panel,\n  useNodesState,\n  useEdgesState,\n  addEdge,\n  Connection,\n  ConnectionMode,\n  MarkerType,\n} from '@xyflow/react'\nimport {StartNode, EndNode, UserTaskNode, AutomatedNode, SubWorkflowNode, WaitForSignalNode, WaitForTimerNode, ParallelForkNode, ParallelJoinNode} from './nodes'\nimport { WorkflowTransitionEdge } from './WorkflowTransitionEdge'\nimport { STATUS_COLORS } from '../lib/status-colors'\nimport { Alert, AlertDescription } from '@open-mercato/ui/primitives/alert'\nimport { Edit3 } from 'lucide-react'\nimport { useTheme } from '@open-mercato/ui/theme'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\n\nexport interface WorkflowGraphImplProps {\n  initialNodes?: Node[]\n  initialEdges?: Edge[]\n  onNodesChange?: (changes: any[]) => void\n  onEdgesChange?: (changes: any[]) => void\n  onNodeClick?: (event: React.MouseEvent, node: Node) => void\n  onEdgeClick?: (event: React.MouseEvent, edge: Edge) => void\n  onConnect?: (connection: Connection) => void\n  editable?: boolean\n  className?: string\n  height?: string\n}\n\nexport default function WorkflowGraphImpl({\n  initialNodes = [],\n  initialEdges = [],\n  onNodesChange: onNodesChangeProp,\n  onEdgesChange: onEdgesChangeProp,\n  onNodeClick: onNodeClickProp,\n  onEdgeClick: onEdgeClickProp,\n  onConnect: onConnectProp,\n  editable = false,\n  className = '',\n  height = '600px',\n}: WorkflowGraphImplProps) {\n  const t = useT()\n  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes)\n  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges)\n\n  const { resolvedTheme } = useTheme()\n  const isDark = resolvedTheme === 'dark'\n  const backgroundDotColor = isDark ? '#374151' : '#e5e7eb'\n  const [isCompactViewport, setIsCompactViewport] = useState(false)\n\n  useEffect(() => {\n    if (typeof window === 'undefined') return\n    const mediaQuery = window.matchMedia('(max-width: 1279px)')\n    const updateViewportMode = () => setIsCompactViewport(mediaQuery.matches)\n\n    updateViewportMode()\n    mediaQuery.addEventListener('change', updateViewportMode)\n\n    return () => {\n      mediaQuery.removeEventListener('change', updateViewportMode)\n    }\n  }, [])\n\n  useEffect(() => {\n    setNodes(initialNodes)\n  }, [initialNodes, setNodes])\n\n  useEffect(() => {\n    setEdges(initialEdges)\n  }, [initialEdges, setEdges])\n\n  const onConnect = useCallback(\n    (connection: Connection) => {\n      if (onConnectProp) {\n        onConnectProp(connection)\n      } else {\n        const newEdge = {\n          ...connection,\n          type: 'workflowTransition',\n          animated: false,\n          markerEnd: {\n            type: MarkerType.ArrowClosed,\n            width: 16,\n            height: 16,\n            color: '#9ca3af',\n          },\n        }\n        setEdges((eds) => addEdge(newEdge, eds))\n      }\n    },\n    [setEdges, onConnectProp]\n  )\n\n  const handleNodesChange = useCallback(\n    (changes: any) => {\n      onNodesChange(changes)\n      if (onNodesChangeProp) {\n        onNodesChangeProp(changes)\n      }\n    },\n    [onNodesChange, onNodesChangeProp]\n  )\n\n  const handleEdgesChange = useCallback(\n    (changes: any) => {\n      onEdgesChange(changes)\n      if (onEdgesChangeProp) {\n        onEdgesChangeProp(changes)\n      }\n    },\n    [onEdgesChange, onEdgesChangeProp]\n  )\n\n  const nodeTypes = useMemo(\n    () => ({\n      start: StartNode,\n      end: EndNode,\n      userTask: UserTaskNode,\n      automated: AutomatedNode,\n      subWorkflow: SubWorkflowNode,\n      waitForSignal: WaitForSignalNode,\n      waitForTimer: WaitForTimerNode,\n      parallelFork: ParallelForkNode,\n      parallelJoin: ParallelJoinNode,\n    }),\n    []\n  )\n\n  const edgeTypes = useMemo(\n    () => ({\n      workflowTransition: WorkflowTransitionEdge,\n    }),\n    []\n  )\n\n  return (\n    <div className={`workflow-graph-container ${className}`} style={{ height }}>\n      <ReactFlow\n        nodes={nodes}\n        edges={edges}\n        nodeTypes={nodeTypes}\n        edgeTypes={edgeTypes}\n        onNodesChange={handleNodesChange}\n        onEdgesChange={handleEdgesChange}\n        onConnect={editable ? onConnect : undefined}\n        onNodeClick={onNodeClickProp}\n        onEdgeClick={onEdgeClickProp}\n        connectionMode={ConnectionMode.Loose}\n        fitView\n        fitViewOptions={{\n          padding: 0.2,\n          maxZoom: isCompactViewport ? 0.9 : 1,\n        }}\n        minZoom={0.1}\n        maxZoom={2}\n        defaultEdgeOptions={{\n          type: 'workflowTransition',\n          animated: false,\n          markerEnd: {\n            type: MarkerType.ArrowClosed,\n            width: 16,\n            height: 16,\n            color: '#9ca3af',\n          },\n        }}\n        nodesDraggable={editable}\n        nodesConnectable={editable}\n        elementsSelectable={editable}\n        proOptions={{ hideAttribution: true }}\n      >\n        <Background\n          variant={BackgroundVariant.Dots}\n          gap={16}\n          size={1}\n          color={backgroundDotColor}\n        />\n\n        <Controls\n          showZoom={true}\n          showFitView={true}\n          showInteractive={false}\n          position={isCompactViewport ? 'bottom-right' : 'top-right'}\n          className={`!bg-card !border-border !shadow-md [&>button]:!bg-card [&>button]:!border-border [&>button]:!fill-foreground [&>button:hover]:!bg-muted ${isCompactViewport ? 'scale-90 origin-bottom-right' : ''}`}\n        />\n\n        {!isCompactViewport && (\n          <MiniMap\n            nodeStrokeWidth={3}\n            nodeColor={(node) => {\n              const status = (node.data?.status || 'not_started') as keyof typeof STATUS_COLORS\n              return STATUS_COLORS[status]?.hex || STATUS_COLORS.not_started.hex\n            }}\n            maskColor=\"rgba(0, 0, 0, 0.1)\"\n            position=\"bottom-left\"\n            className=\"!bg-card !border !border-border !rounded-lg\"\n          />\n        )}\n\n        {!editable && !isCompactViewport && (\n          <Panel position=\"top-left\" style={{ margin: 10 }}>\n            <div className=\"bg-card rounded-lg shadow-sm border border-border px-4 py-2\">\n              <p className=\"text-sm text-muted-foreground font-medium\">\n                {t('workflows.graph.visualization')}\n              </p>\n            </div>\n          </Panel>\n        )}\n\n        {editable && !isCompactViewport && (\n          <Panel position=\"top-left\" style={{ margin: 10 }}>\n            <Alert variant=\"info\" icon={<Edit3 aria-hidden=\"true\" />} className=\"max-w-sm\">\n              <AlertDescription className=\"font-medium\">\n                {t('workflows.graph.editModeInfo')}\n              </AlertDescription>\n            </Alert>\n          </Panel>\n        )}\n      </ReactFlow>\n    </div>\n  )\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\n\nimport '@xyflow/react/dist/style.css'\n\nimport { useCallback, useMemo, useEffect, useRef, useState } from 'react'\nimport {\n  ReactFlow,\n  Node,\n  Edge,\n  Controls,\n  Background,\n  BackgroundVariant,\n  MiniMap,\n  Panel,\n  useNodesState,\n  useEdgesState,\n  addEdge,\n  applyNodeChanges,\n  applyEdgeChanges,\n  Connection,\n  NodeChange,\n  EdgeChange,\n  ConnectionMode,\n  MarkerType,\n} from '@xyflow/react'\nimport {StartNode, EndNode, UserTaskNode, AutomatedNode, SubWorkflowNode, WaitForSignalNode, WaitForTimerNode, ParallelForkNode, ParallelJoinNode} from './nodes'\nimport { WorkflowTransitionEdge } from './WorkflowTransitionEdge'\nimport { STATUS_COLORS } from '../lib/status-colors'\nimport { Alert, AlertDescription } from '@open-mercato/ui/primitives/alert'\nimport { Edit3 } from 'lucide-react'\nimport { useTheme } from '@open-mercato/ui/theme'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\n\nexport interface WorkflowGraphImplProps {\n  initialNodes?: Node[]\n  initialEdges?: Edge[]\n  onNodesChange?: (nodes: Node[]) => void\n  onEdgesChange?: (edges: Edge[]) => void\n  onNodeClick?: (event: React.MouseEvent, node: Node) => void\n  onEdgeClick?: (event: React.MouseEvent, edge: Edge) => void\n  onConnect?: (connection: Connection) => void\n  editable?: boolean\n  className?: string\n  height?: string\n}\n\nexport default function WorkflowGraphImpl({\n  initialNodes = [],\n  initialEdges = [],\n  onNodesChange: onNodesChangeProp,\n  onEdgesChange: onEdgesChangeProp,\n  onNodeClick: onNodeClickProp,\n  onEdgeClick: onEdgeClickProp,\n  onConnect: onConnectProp,\n  editable = false,\n  className = '',\n  height = '600px',\n}: WorkflowGraphImplProps) {\n  const t = useT()\n  const [nodes, setNodes] = useNodesState(initialNodes)\n  const [edges, setEdges] = useEdgesState(initialEdges)\n\n  // Track the latest committed graph so the change reducers can run inside the\n  // lazy boundary (#3169) and forward the already-applied arrays to the parent,\n  // keeping React Flow's runtime out of the editor page chunk.\n  const latestNodesRef = useRef(nodes)\n  latestNodesRef.current = nodes\n  const latestEdgesRef = useRef(edges)\n  latestEdgesRef.current = edges\n\n  const { resolvedTheme } = useTheme()\n  const isDark = resolvedTheme === 'dark'\n  const backgroundDotColor = isDark ? '#374151' : '#e5e7eb'\n  const [isCompactViewport, setIsCompactViewport] = useState(false)\n\n  useEffect(() => {\n    if (typeof window === 'undefined') return\n    const mediaQuery = window.matchMedia('(max-width: 1279px)')\n    const updateViewportMode = () => setIsCompactViewport(mediaQuery.matches)\n\n    updateViewportMode()\n    mediaQuery.addEventListener('change', updateViewportMode)\n\n    return () => {\n      mediaQuery.removeEventListener('change', updateViewportMode)\n    }\n  }, [])\n\n  useEffect(() => {\n    setNodes(initialNodes)\n  }, [initialNodes, setNodes])\n\n  useEffect(() => {\n    setEdges(initialEdges)\n  }, [initialEdges, setEdges])\n\n  const onConnect = useCallback(\n    (connection: Connection) => {\n      if (onConnectProp) {\n        onConnectProp(connection)\n      } else {\n        const newEdge = {\n          ...connection,\n          type: 'workflowTransition',\n          animated: false,\n          markerEnd: {\n            type: MarkerType.ArrowClosed,\n            width: 16,\n            height: 16,\n            color: '#9ca3af',\n          },\n        }\n        setEdges((eds) => addEdge(newEdge, eds))\n      }\n    },\n    [setEdges, onConnectProp]\n  )\n\n  const handleNodesChange = useCallback(\n    (changes: NodeChange[]) => {\n      const nextNodes = applyNodeChanges(changes, latestNodesRef.current)\n      setNodes(nextNodes)\n      if (onNodesChangeProp) {\n        onNodesChangeProp(nextNodes)\n      }\n    },\n    [setNodes, onNodesChangeProp]\n  )\n\n  const handleEdgesChange = useCallback(\n    (changes: EdgeChange[]) => {\n      const nextEdges = applyEdgeChanges(changes, latestEdgesRef.current)\n      setEdges(nextEdges)\n      if (onEdgesChangeProp) {\n        onEdgesChangeProp(nextEdges)\n      }\n    },\n    [setEdges, onEdgesChangeProp]\n  )\n\n  const nodeTypes = useMemo(\n    () => ({\n      start: StartNode,\n      end: EndNode,\n      userTask: UserTaskNode,\n      automated: AutomatedNode,\n      subWorkflow: SubWorkflowNode,\n      waitForSignal: WaitForSignalNode,\n      waitForTimer: WaitForTimerNode,\n      parallelFork: ParallelForkNode,\n      parallelJoin: ParallelJoinNode,\n    }),\n    []\n  )\n\n  const edgeTypes = useMemo(\n    () => ({\n      workflowTransition: WorkflowTransitionEdge,\n    }),\n    []\n  )\n\n  return (\n    <div className={`workflow-graph-container ${className}`} style={{ height }}>\n      <ReactFlow\n        nodes={nodes}\n        edges={edges}\n        nodeTypes={nodeTypes}\n        edgeTypes={edgeTypes}\n        onNodesChange={handleNodesChange}\n        onEdgesChange={handleEdgesChange}\n        onConnect={editable ? onConnect : undefined}\n        onNodeClick={onNodeClickProp}\n        onEdgeClick={onEdgeClickProp}\n        connectionMode={ConnectionMode.Loose}\n        fitView\n        fitViewOptions={{\n          padding: 0.2,\n          maxZoom: isCompactViewport ? 0.9 : 1,\n        }}\n        minZoom={0.1}\n        maxZoom={2}\n        defaultEdgeOptions={{\n          type: 'workflowTransition',\n          animated: false,\n          markerEnd: {\n            type: MarkerType.ArrowClosed,\n            width: 16,\n            height: 16,\n            color: '#9ca3af',\n          },\n        }}\n        nodesDraggable={editable}\n        nodesConnectable={editable}\n        elementsSelectable={editable}\n        proOptions={{ hideAttribution: true }}\n      >\n        <Background\n          variant={BackgroundVariant.Dots}\n          gap={16}\n          size={1}\n          color={backgroundDotColor}\n        />\n\n        <Controls\n          showZoom={true}\n          showFitView={true}\n          showInteractive={false}\n          position={isCompactViewport ? 'bottom-right' : 'top-right'}\n          className={`!bg-card !border-border !shadow-md [&>button]:!bg-card [&>button]:!border-border [&>button]:!fill-foreground [&>button:hover]:!bg-muted ${isCompactViewport ? 'scale-90 origin-bottom-right' : ''}`}\n        />\n\n        {!isCompactViewport && (\n          <MiniMap\n            nodeStrokeWidth={3}\n            nodeColor={(node) => {\n              const status = (node.data?.status || 'not_started') as keyof typeof STATUS_COLORS\n              return STATUS_COLORS[status]?.hex || STATUS_COLORS.not_started.hex\n            }}\n            maskColor=\"rgba(0, 0, 0, 0.1)\"\n            position=\"bottom-left\"\n            className=\"!bg-card !border !border-border !rounded-lg\"\n          />\n        )}\n\n        {!editable && !isCompactViewport && (\n          <Panel position=\"top-left\" style={{ margin: 10 }}>\n            <div className=\"bg-card rounded-lg shadow-sm border border-border px-4 py-2\">\n              <p className=\"text-sm text-muted-foreground font-medium\">\n                {t('workflows.graph.visualization')}\n              </p>\n            </div>\n          </Panel>\n        )}\n\n        {editable && !isCompactViewport && (\n          <Panel position=\"top-left\" style={{ margin: 10 }}>\n            <Alert variant=\"info\" icon={<Edit3 aria-hidden=\"true\" />} className=\"max-w-sm\">\n              <AlertDescription className=\"font-medium\">\n                {t('workflows.graph.editModeInfo')}\n              </AlertDescription>\n            </Alert>\n          </Panel>\n        )}\n      </ReactFlow>\n    </div>\n  )\n}\n"],
+  "mappings": ";AAoKM,SAiCE,KAjCF;AAlKN,OAAO;AAEP,SAAS,aAAa,SAAS,WAAW,QAAQ,gBAAgB;AAClE;AAAA,EACE;AAAA,EAGA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAIA;AAAA,EACA;AAAA,OACK;AACP,SAAQ,WAAW,SAAS,cAAc,eAAe,iBAAiB,mBAAmB,kBAAkB,kBAAkB,wBAAuB;AACxJ,SAAS,8BAA8B;AACvC,SAAS,qBAAqB;AAC9B,SAAS,OAAO,wBAAwB;AACxC,SAAS,aAAa;AACtB,SAAS,gBAAgB;AACzB,SAAS,YAAY;AAeN,SAAR,kBAAmC;AAAA,EACxC,eAAe,CAAC;AAAA,EAChB,eAAe,CAAC;AAAA,EAChB,eAAe;AAAA,EACf,eAAe;AAAA,EACf,aAAa;AAAA,EACb,aAAa;AAAA,EACb,WAAW;AAAA,EACX,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,SAAS;AACX,GAA2B;AACzB,QAAM,IAAI,KAAK;AACf,QAAM,CAAC,OAAO,QAAQ,IAAI,cAAc,YAAY;AACpD,QAAM,CAAC,OAAO,QAAQ,IAAI,cAAc,YAAY;AAKpD,QAAM,iBAAiB,OAAO,KAAK;AACnC,iBAAe,UAAU;AACzB,QAAM,iBAAiB,OAAO,KAAK;AACnC,iBAAe,UAAU;AAEzB,QAAM,EAAE,cAAc,IAAI,SAAS;AACnC,QAAM,SAAS,kBAAkB;AACjC,QAAM,qBAAqB,SAAS,YAAY;AAChD,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS,KAAK;AAEhE,YAAU,MAAM;AACd,QAAI,OAAO,WAAW,YAAa;AACnC,UAAM,aAAa,OAAO,WAAW,qBAAqB;AAC1D,UAAM,qBAAqB,MAAM,qBAAqB,WAAW,OAAO;AAExE,uBAAmB;AACnB,eAAW,iBAAiB,UAAU,kBAAkB;AAExD,WAAO,MAAM;AACX,iBAAW,oBAAoB,UAAU,kBAAkB;AAAA,IAC7D;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACd,aAAS,YAAY;AAAA,EACvB,GAAG,CAAC,cAAc,QAAQ,CAAC;AAE3B,YAAU,MAAM;AACd,aAAS,YAAY;AAAA,EACvB,GAAG,CAAC,cAAc,QAAQ,CAAC;AAE3B,QAAM,YAAY;AAAA,IAChB,CAAC,eAA2B;AAC1B,UAAI,eAAe;AACjB,sBAAc,UAAU;AAAA,MAC1B,OAAO;AACL,cAAM,UAAU;AAAA,UACd,GAAG;AAAA,UACH,MAAM;AAAA,UACN,UAAU;AAAA,UACV,WAAW;AAAA,YACT,MAAM,WAAW;AAAA,YACjB,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,OAAO;AAAA,UACT;AAAA,QACF;AACA,iBAAS,CAAC,QAAQ,QAAQ,SAAS,GAAG,CAAC;AAAA,MACzC;AAAA,IACF;AAAA,IACA,CAAC,UAAU,aAAa;AAAA,EAC1B;AAEA,QAAM,oBAAoB;AAAA,IACxB,CAAC,YAA0B;AACzB,YAAM,YAAY,iBAAiB,SAAS,eAAe,OAAO;AAClE,eAAS,SAAS;AAClB,UAAI,mBAAmB;AACrB,0BAAkB,SAAS;AAAA,MAC7B;AAAA,IACF;AAAA,IACA,CAAC,UAAU,iBAAiB;AAAA,EAC9B;AAEA,QAAM,oBAAoB;AAAA,IACxB,CAAC,YAA0B;AACzB,YAAM,YAAY,iBAAiB,SAAS,eAAe,OAAO;AAClE,eAAS,SAAS;AAClB,UAAI,mBAAmB;AACrB,0BAAkB,SAAS;AAAA,MAC7B;AAAA,IACF;AAAA,IACA,CAAC,UAAU,iBAAiB;AAAA,EAC9B;AAEA,QAAM,YAAY;AAAA,IAChB,OAAO;AAAA,MACL,OAAO;AAAA,MACP,KAAK;AAAA,MACL,UAAU;AAAA,MACV,WAAW;AAAA,MACX,aAAa;AAAA,MACb,eAAe;AAAA,MACf,cAAc;AAAA,MACd,cAAc;AAAA,MACd,cAAc;AAAA,IAChB;AAAA,IACA,CAAC;AAAA,EACH;AAEA,QAAM,YAAY;AAAA,IAChB,OAAO;AAAA,MACL,oBAAoB;AAAA,IACtB;AAAA,IACA,CAAC;AAAA,EACH;AAEA,SACE,oBAAC,SAAI,WAAW,4BAA4B,SAAS,IAAI,OAAO,EAAE,OAAO,GACvE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAe;AAAA,MACf,eAAe;AAAA,MACf,WAAW,WAAW,YAAY;AAAA,MAClC,aAAa;AAAA,MACb,aAAa;AAAA,MACb,gBAAgB,eAAe;AAAA,MAC/B,SAAO;AAAA,MACP,gBAAgB;AAAA,QACd,SAAS;AAAA,QACT,SAAS,oBAAoB,MAAM;AAAA,MACrC;AAAA,MACA,SAAS;AAAA,MACT,SAAS;AAAA,MACT,oBAAoB;AAAA,QAClB,MAAM;AAAA,QACN,UAAU;AAAA,QACV,WAAW;AAAA,UACT,MAAM,WAAW;AAAA,UACjB,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,OAAO;AAAA,QACT;AAAA,MACF;AAAA,MACA,gBAAgB;AAAA,MAChB,kBAAkB;AAAA,MAClB,oBAAoB;AAAA,MACpB,YAAY,EAAE,iBAAiB,KAAK;AAAA,MAEpC;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,SAAS,kBAAkB;AAAA,YAC3B,KAAK;AAAA,YACL,MAAM;AAAA,YACN,OAAO;AAAA;AAAA,QACT;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACV,aAAa;AAAA,YACb,iBAAiB;AAAA,YACjB,UAAU,oBAAoB,iBAAiB;AAAA,YAC/C,WAAW,2IAA2I,oBAAoB,iCAAiC,EAAE;AAAA;AAAA,QAC/M;AAAA,QAEC,CAAC,qBACA;AAAA,UAAC;AAAA;AAAA,YACC,iBAAiB;AAAA,YACjB,WAAW,CAAC,SAAS;AACnB,oBAAM,SAAU,KAAK,MAAM,UAAU;AACrC,qBAAO,cAAc,MAAM,GAAG,OAAO,cAAc,YAAY;AAAA,YACjE;AAAA,YACA,WAAU;AAAA,YACV,UAAS;AAAA,YACT,WAAU;AAAA;AAAA,QACZ;AAAA,QAGD,CAAC,YAAY,CAAC,qBACb,oBAAC,SAAM,UAAS,YAAW,OAAO,EAAE,QAAQ,GAAG,GAC7C,8BAAC,SAAI,WAAU,+DACb,8BAAC,OAAE,WAAU,6CACV,YAAE,+BAA+B,GACpC,GACF,GACF;AAAA,QAGD,YAAY,CAAC,qBACZ,oBAAC,SAAM,UAAS,YAAW,OAAO,EAAE,QAAQ,GAAG,GAC7C,8BAAC,SAAM,SAAQ,QAAO,MAAM,oBAAC,SAAM,eAAY,QAAO,GAAI,WAAU,YAClE,8BAAC,oBAAiB,WAAU,eACzB,YAAE,8BAA8B,GACnC,GACF,GACF;AAAA;AAAA;AAAA,EAEJ,GACF;AAEJ;",
   "names": []
 }

package/dist/modules/workflows/components/mobile/MobileVisualEditor.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/modules/workflows/components/mobile/MobileVisualEditor.tsx"],
-  "sourcesContent": ["'use client'\n\nimport { useState } from 'react'\nimport type { Node, Edge, NodeChange, EdgeChange, Connection } from '@xyflow/react'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n} from '@open-mercato/ui/primitives/dialog'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Save, MoreVertical, FileText, Trash2, CircleQuestionMark, Play } from 'lucide-react'\nimport { NODE_TYPE_ICONS, NODE_TYPE_LABELS } from '../../lib/node-type-icons'\nimport { WorkflowGraph } from '../WorkflowGraph'\nimport { MobileMetadataSheet } from './MobileMetadataSheet'\nimport type { WorkflowMetadataState, WorkflowMetadataHandlers } from '../../data/types'\n\nexport interface MobileVisualEditorProps {\n  definitionId: string | null\n  isSaving: boolean\n  nodes: Node[]\n  edges: Edge[]\n  onNodesChange: (changes: NodeChange[]) => void\n  onEdgesChange: (changes: EdgeChange[]) => void\n  onNodeClick: (event: React.MouseEvent, node: Node) => void\n  onEdgeClick: (event: React.MouseEvent, edge: Edge) => void\n  onConnect: (connection: Connection) => void\n  onAddNode: (nodeType: string) => void\n  onSave: () => void\n  onValidate: () => void\n  onTest: () => void\n  onLoadExample: () => void\n  onClear: () => void\n  metadata: WorkflowMetadataState\n  metadataHandlers: WorkflowMetadataHandlers\n}\n\nconst NODE_TYPES = ['start', 'userTask', 'automated', 'waitForSignal', 'subWorkflow', 'end'] as const\n\nexport function MobileVisualEditor({\n  definitionId,\n  isSaving,\n  nodes,\n  edges,\n  onNodesChange,\n  onEdgesChange,\n  onNodeClick,\n  onEdgeClick,\n  onConnect,\n  onAddNode,\n  onSave,\n  onValidate,\n  onTest,\n  onLoadExample,\n  onClear,\n  metadata,\n  metadataHandlers,\n}: MobileVisualEditorProps) {\n  const t = useT()\n  const [showMetadata, setShowMetadata] = useState(false)\n  const [showMoreActions, setShowMoreActions] = useState(false)\n\n  const { workflowName } = metadata\n\n  return (\n    <div className=\"flex flex-col h-full\">\n      <div className=\"shrink-0 flex items-center justify-between gap-1 border-b border-border bg-background px-3 py-2\">\n        <h1 className=\"truncate text-sm font-semibold\">\n          {definitionId ? (workflowName || t('workflows.definitions.singular')) : t('workflows.backend.definitions.visual_editor.title')}\n        </h1>\n        <div className=\"flex shrink-0 items-center gap-1\">\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={() => setShowMetadata(true)}\n            className=\"h-8 px-2\"\n            aria-label={t('workflows.mobile.metadata', 'Metadata')}\n          >\n            <FileText className=\"h-4 w-4\" />\n          </Button>\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={onValidate}\n            disabled={isSaving}\n            className=\"h-8 px-2\"\n            aria-label={t('workflows.mobile.validate')}\n          >\n            <CircleQuestionMark className=\"h-4 w-4\" />\n          </Button>\n          <Button\n            size=\"sm\"\n            onClick={onSave}\n            disabled={isSaving}\n            className=\"h-8 px-2\"\n            aria-label={isSaving ? t('workflows.mobile.saving') : t('workflows.mobile.save')}\n          >\n            <Save className=\"h-4 w-4\" />\n            <span className=\"ml-1 text-xs\">{isSaving ? '...' : definitionId ? t('workflows.common.update') : t('workflows.common.save')}</span>\n          </Button>\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            className=\"h-8 w-8 p-0\"\n            onClick={() => setShowMoreActions(true)}\n            aria-label={t('workflows.mobile.moreActions', 'More')}\n          >\n            <MoreVertical className=\"h-4 w-4\" />\n          </Button>\n        </div>\n      </div>\n\n      <div className=\"shrink-0 border-b border-border bg-background px-3 py-2\">\n        <div className=\"flex gap-1.5 overflow-x-auto pb-0.5\">\n          {NODE_TYPES.map((nodeType) => {\n            const Icon = NODE_TYPE_ICONS[nodeType]\n            return (\n              <button\n                key={nodeType}\n                onClick={() => onAddNode(nodeType)}\n                className=\"flex shrink-0 items-center gap-1 rounded-md border bg-background px-2 py-1.5 text-xs hover:bg-muted active:bg-muted/50\"\n              >\n                <Icon className=\"h-3.5 w-3.5\" />\n                <span>{NODE_TYPE_LABELS[nodeType].title}</span>\n              </button>\n            )\n          })}\n        </div>\n      </div>\n\n      <div className=\"relative min-h-0 flex-1\">\n        <WorkflowGraph\n          initialNodes={nodes}\n          initialEdges={edges}\n          onNodesChange={onNodesChange}\n          onEdgesChange={onEdgesChange}\n          onNodeClick={onNodeClick}\n          onEdgeClick={onEdgeClick}\n          onConnect={onConnect}\n          editable={true}\n          height=\"100%\"\n        />\n\n        {nodes.length === 0 && (\n          <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center px-4\">\n            <div className=\"text-center\">\n              <h2 className=\"mb-2 text-lg font-semibold text-foreground\">{t('workflows.mobile.startBuilding', 'Start Building')}</h2>\n              <p className=\"mb-3 text-sm text-muted-foreground\">{t('workflows.mobile.startBuildingHint', 'Tap a step type above to add it')}</p>\n              <button\n                onClick={onLoadExample}\n                className=\"pointer-events-auto text-sm text-primary hover:underline\"\n              >\n                {t('workflows.mobile.loadExample', 'Load an example workflow')}\n              </button>\n            </div>\n          </div>\n        )}\n      </div>\n\n      <Dialog open={showMoreActions} onOpenChange={setShowMoreActions}>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>{t('workflows.mobile.moreActions', 'More Actions')}</DialogTitle>\n          </DialogHeader>\n          <div className=\"space-y-2\">\n            <button\n              onClick={() => { onLoadExample(); setShowMoreActions(false) }}\n              className=\"flex w-full items-center gap-3 rounded-lg border p-3 text-left text-sm hover:bg-muted active:bg-muted\"\n            >\n              {t('workflows.mobile.loadExample', 'Load Example')}\n            </button>\n            <button\n              onClick={() => { onTest(); setShowMoreActions(false) }}\n              disabled={isSaving}\n              className=\"flex w-full items-center gap-3 rounded-lg border p-3 text-left text-sm hover:bg-muted active:bg-muted disabled:opacity-50\"\n            >\n              <Play className=\"h-4 w-4\" />\n              {t('workflows.mobile.runTest', 'Run Test')}\n            </button>\n            <button\n              onClick={() => { onClear(); setShowMoreActions(false) }}\n              disabled={isSaving}\n              className=\"flex w-full items-center gap-3 rounded-lg border p-3 text-left text-sm text-destructive hover:bg-muted active:bg-muted disabled:opacity-50\"\n            >\n              <Trash2 className=\"h-4 w-4\" />\n              {t('workflows.mobile.clear', 'Clear')}\n            </button>\n          </div>\n        </DialogContent>\n      </Dialog>\n\n      <MobileMetadataSheet\n        open={showMetadata}\n        onOpenChange={setShowMetadata}\n        definitionId={definitionId}\n        metadata={metadata}\n        metadataHandlers={metadataHandlers}\n      />\n    </div>\n  )\n}\n"],
+  "sourcesContent": ["'use client'\n\nimport { useState } from 'react'\nimport type { Node, Edge, Connection } from '@xyflow/react'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n} from '@open-mercato/ui/primitives/dialog'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Save, MoreVertical, FileText, Trash2, CircleQuestionMark, Play } from 'lucide-react'\nimport { NODE_TYPE_ICONS, NODE_TYPE_LABELS } from '../../lib/node-type-icons'\nimport { WorkflowGraph } from '../WorkflowGraph'\nimport { MobileMetadataSheet } from './MobileMetadataSheet'\nimport type { WorkflowMetadataState, WorkflowMetadataHandlers } from '../../data/types'\n\nexport interface MobileVisualEditorProps {\n  definitionId: string | null\n  isSaving: boolean\n  nodes: Node[]\n  edges: Edge[]\n  onNodesChange: (nodes: Node[]) => void\n  onEdgesChange: (edges: Edge[]) => void\n  onNodeClick: (event: React.MouseEvent, node: Node) => void\n  onEdgeClick: (event: React.MouseEvent, edge: Edge) => void\n  onConnect: (connection: Connection) => void\n  onAddNode: (nodeType: string) => void\n  onSave: () => void\n  onValidate: () => void\n  onTest: () => void\n  onLoadExample: () => void\n  onClear: () => void\n  metadata: WorkflowMetadataState\n  metadataHandlers: WorkflowMetadataHandlers\n}\n\nconst NODE_TYPES = ['start', 'userTask', 'automated', 'waitForSignal', 'subWorkflow', 'end'] as const\n\nexport function MobileVisualEditor({\n  definitionId,\n  isSaving,\n  nodes,\n  edges,\n  onNodesChange,\n  onEdgesChange,\n  onNodeClick,\n  onEdgeClick,\n  onConnect,\n  onAddNode,\n  onSave,\n  onValidate,\n  onTest,\n  onLoadExample,\n  onClear,\n  metadata,\n  metadataHandlers,\n}: MobileVisualEditorProps) {\n  const t = useT()\n  const [showMetadata, setShowMetadata] = useState(false)\n  const [showMoreActions, setShowMoreActions] = useState(false)\n\n  const { workflowName } = metadata\n\n  return (\n    <div className=\"flex flex-col h-full\">\n      <div className=\"shrink-0 flex items-center justify-between gap-1 border-b border-border bg-background px-3 py-2\">\n        <h1 className=\"truncate text-sm font-semibold\">\n          {definitionId ? (workflowName || t('workflows.definitions.singular')) : t('workflows.backend.definitions.visual_editor.title')}\n        </h1>\n        <div className=\"flex shrink-0 items-center gap-1\">\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={() => setShowMetadata(true)}\n            className=\"h-8 px-2\"\n            aria-label={t('workflows.mobile.metadata', 'Metadata')}\n          >\n            <FileText className=\"h-4 w-4\" />\n          </Button>\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={onValidate}\n            disabled={isSaving}\n            className=\"h-8 px-2\"\n            aria-label={t('workflows.mobile.validate')}\n          >\n            <CircleQuestionMark className=\"h-4 w-4\" />\n          </Button>\n          <Button\n            size=\"sm\"\n            onClick={onSave}\n            disabled={isSaving}\n            className=\"h-8 px-2\"\n            aria-label={isSaving ? t('workflows.mobile.saving') : t('workflows.mobile.save')}\n          >\n            <Save className=\"h-4 w-4\" />\n            <span className=\"ml-1 text-xs\">{isSaving ? '...' : definitionId ? t('workflows.common.update') : t('workflows.common.save')}</span>\n          </Button>\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            className=\"h-8 w-8 p-0\"\n            onClick={() => setShowMoreActions(true)}\n            aria-label={t('workflows.mobile.moreActions', 'More')}\n          >\n            <MoreVertical className=\"h-4 w-4\" />\n          </Button>\n        </div>\n      </div>\n\n      <div className=\"shrink-0 border-b border-border bg-background px-3 py-2\">\n        <div className=\"flex gap-1.5 overflow-x-auto pb-0.5\">\n          {NODE_TYPES.map((nodeType) => {\n            const Icon = NODE_TYPE_ICONS[nodeType]\n            return (\n              <button\n                key={nodeType}\n                onClick={() => onAddNode(nodeType)}\n                className=\"flex shrink-0 items-center gap-1 rounded-md border bg-background px-2 py-1.5 text-xs hover:bg-muted active:bg-muted/50\"\n              >\n                <Icon className=\"h-3.5 w-3.5\" />\n                <span>{NODE_TYPE_LABELS[nodeType].title}</span>\n              </button>\n            )\n          })}\n        </div>\n      </div>\n\n      <div className=\"relative min-h-0 flex-1\">\n        <WorkflowGraph\n          initialNodes={nodes}\n          initialEdges={edges}\n          onNodesChange={onNodesChange}\n          onEdgesChange={onEdgesChange}\n          onNodeClick={onNodeClick}\n          onEdgeClick={onEdgeClick}\n          onConnect={onConnect}\n          editable={true}\n          height=\"100%\"\n        />\n\n        {nodes.length === 0 && (\n          <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center px-4\">\n            <div className=\"text-center\">\n              <h2 className=\"mb-2 text-lg font-semibold text-foreground\">{t('workflows.mobile.startBuilding', 'Start Building')}</h2>\n              <p className=\"mb-3 text-sm text-muted-foreground\">{t('workflows.mobile.startBuildingHint', 'Tap a step type above to add it')}</p>\n              <button\n                onClick={onLoadExample}\n                className=\"pointer-events-auto text-sm text-primary hover:underline\"\n              >\n                {t('workflows.mobile.loadExample', 'Load an example workflow')}\n              </button>\n            </div>\n          </div>\n        )}\n      </div>\n\n      <Dialog open={showMoreActions} onOpenChange={setShowMoreActions}>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>{t('workflows.mobile.moreActions', 'More Actions')}</DialogTitle>\n          </DialogHeader>\n          <div className=\"space-y-2\">\n            <button\n              onClick={() => { onLoadExample(); setShowMoreActions(false) }}\n              className=\"flex w-full items-center gap-3 rounded-lg border p-3 text-left text-sm hover:bg-muted active:bg-muted\"\n            >\n              {t('workflows.mobile.loadExample', 'Load Example')}\n            </button>\n            <button\n              onClick={() => { onTest(); setShowMoreActions(false) }}\n              disabled={isSaving}\n              className=\"flex w-full items-center gap-3 rounded-lg border p-3 text-left text-sm hover:bg-muted active:bg-muted disabled:opacity-50\"\n            >\n              <Play className=\"h-4 w-4\" />\n              {t('workflows.mobile.runTest', 'Run Test')}\n            </button>\n            <button\n              onClick={() => { onClear(); setShowMoreActions(false) }}\n              disabled={isSaving}\n              className=\"flex w-full items-center gap-3 rounded-lg border p-3 text-left text-sm text-destructive hover:bg-muted active:bg-muted disabled:opacity-50\"\n            >\n              <Trash2 className=\"h-4 w-4\" />\n              {t('workflows.mobile.clear', 'Clear')}\n            </button>\n          </div>\n        </DialogContent>\n      </Dialog>\n\n      <MobileMetadataSheet\n        open={showMetadata}\n        onOpenChange={setShowMetadata}\n        definitionId={definitionId}\n        metadata={metadata}\n        metadataHandlers={metadataHandlers}\n      />\n    </div>\n  )\n}\n"],
   "mappings": "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",
   "names": []
 }

package/dist/modules/workflows/frontend/checkout-demo/deriveCurrentStep.js ADDED Viewed

@@ -0,0 +1,8 @@
+function deriveCurrentStep(currentStepId, steps) {
+  if (!currentStepId) return null;
+  return steps.find((step) => step.stepId === currentStepId) ?? null;
+}
+export {
+  deriveCurrentStep
+};
+//# sourceMappingURL=deriveCurrentStep.js.map

package/dist/modules/workflows/frontend/checkout-demo/deriveCurrentStep.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/workflows/frontend/checkout-demo/deriveCurrentStep.ts"],
+  "sourcesContent": ["/**\n * Derives the current workflow step from the running instance's `currentStepId`\n * and the available workflow steps. This is a pure function of its inputs so the\n * checkout demo can compute it during render instead of mirroring it into state.\n */\nexport function deriveCurrentStep<TStep extends { stepId: string }>(\n  currentStepId: string | undefined,\n  steps: TStep[],\n): TStep | null {\n  if (!currentStepId) return null\n  return steps.find((step) => step.stepId === currentStepId) ?? null\n}\n"],
+  "mappings": "AAKO,SAAS,kBACd,eACA,OACc;AACd,MAAI,CAAC,cAAe,QAAO;AAC3B,SAAO,MAAM,KAAK,CAAC,SAAS,KAAK,WAAW,aAAa,KAAK;AAChE;",
+  "names": []
+}

package/dist/modules/workflows/frontend/checkout-demo/page.js CHANGED Viewed

@@ -14,6 +14,7 @@ import {
 import Link from "next/link";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useT } from "@open-mercato/shared/lib/i18n/context";
+import { deriveCurrentStep } from "./deriveCurrentStep.js";
 function CheckoutDemoPage() {
   const queryClient = useQueryClient();
   const t = useT();
@@ -21,8 +22,6 @@ function CheckoutDemoPage() {
   const [advancing, setAdvancing] = useState(false);
   const [result, setResult] = useState(null);
   const [error, setError] = useState(null);
-  const [currentStep, setCurrentStep] = useState(null);
-  const [availableSteps, setAvailableSteps] = useState([]);
   const [formData, setFormData] = useState({});
   const [submittingTask, setSubmittingTask] = useState(false);
   const [taskError, setTaskError] = useState(null);
@@ -186,18 +185,7 @@ function CheckoutDemoPage() {
     { stepId: "order_confirmation", stepName: "Order Confirmation", stepType: "AUTOMATED", description: "Create order and send confirmation" },
     { stepId: "end", stepName: "Complete", stepType: "END", description: "Checkout completed" }
   ];
-  useEffect(() => {
-    if (result?.currentStepId) {
-      const current = workflowSteps.find((s) => s.stepId === result.currentStepId);
-      setCurrentStep(current || null);
-      const currentIndex = workflowSteps.findIndex((s) => s.stepId === result.currentStepId);
-      if (currentIndex >= 0 && currentIndex < workflowSteps.length - 1) {
-        setAvailableSteps([workflowSteps[currentIndex + 1]]);
-      } else {
-        setAvailableSteps([]);
-      }
-    }
-  }, [result]);
+  const currentStep = deriveCurrentStep(result?.currentStepId, workflowSteps);
   useEffect(() => {
     if (result?.status === "PAUSED") {
       setEnableTaskPolling(false);
@@ -1189,8 +1177,6 @@ function CheckoutDemoPage() {
                 onClick: () => {
                   setResult(null);
                   setError(null);
-                  setCurrentStep(null);
-                  setAvailableSteps([]);
                 },
                 variant: "outline",
                 className: "w-full",
@@ -1208,8 +1194,6 @@ function CheckoutDemoPage() {
               onClick: () => {
                 setResult(null);
                 setError(null);
-                setCurrentStep(null);
-                setAvailableSteps([]);
               },
               className: "w-full mt-6",
               children: t("workflows.checkoutDemo.failed.tryAgain", "Try Again")
@@ -1417,8 +1401,6 @@ function CheckoutDemoPage() {
                 onClick: () => {
                   setResult(null);
                   setError(null);
-                  setCurrentStep(null);
-                  setAvailableSteps([]);
                 },
                 variant: "outline",
                 className: "w-full",